0

问题描述：我有一个电子商务应用程序，我必须在其中加载很多产品图像。我们将 200*200 的图片用于小图片，但也有 600*600 大小的模态框，在点击任何产品时会出现。

问题是，当每个页面加载时，所有图像（200*200 和 600*600）都在加载，这使得应用程序太慢了。

问题：有什么办法可以避免（600*600）图像在被点击之前加载。我希望应用程序最初只加载 200*200 的图像，并根据请求加载任何 600*600 的图像。

技术：（Jade、Angularjs、Nodejs）

代码：

<div ng-repeat="product in category.products | filter:query | orderBy: 'productName'">
    <div class="panel-default panel thumbnail" id="imgs">
        <div class="panel-body">
            <a href="#" data-target="#img_modal{{product._id}}" data-toggle="modal">
                <img class="img-responsive center-block" ng-src="{{product.productImage_tn}}" alt="" id="items" />
            </a>
            <div class="modal" id='img_modal{{product._id}}' tabindex='-1' role='dialog' area-hidden='true'>
                <div class="modal-dialog" style="width: 630px;">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4>{{ product.productName }}
                                <button class="close" type='button' data-dismiss='modal' area-hidden='true'>  &times;</button>
                            </h4>
                        </div>
                        <div class="modal-body">
                            <img ng-src="{{product.productImage_600}}" style=" position: relative; height: 400px;" class="img-responsive center-block">
                        </div>
                        <div class="modal-footer">
                            <div class="row">
                                <div class="col-sm-4 col-md-4">
                                    <h4>$ {{ product.productPrice }} {{ product.productUnit }}</h4>
                                </div>
                                <div class="col-sm-2 col-md-2"></div>
                                <div class="col-sm-6 col-md-6">
                                    <div class="input-group number-spinner">
                                        <span class="input-group-btn">
                                            <button class="btn btn-default" ng-click="removeItem(product._id)">
                                                <span class="glyphicon glyphicon-minus"></span>
                                            </button>
                                        </span>
                                        <label class="form-control text-center">{{ getItemQty(product._id) }}</label>
                                        <span class="input-group-btn">
                                            <button class="btn btn-default" ng-click="addItem(product._id)">
                                                <span class="glyphicon glyphicon-plus"></span>
                                            </button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-footer" id="panelfooter">
            <h6>{{ product.productName }} </h6>
            <h6>$ {{ product.productPrice }} {{ product.productUnit }}</h6>
        </div>
        <div class="input-group number-spinner">
            <span class="input-group-btn">
                <button class="btn btn-default" ng-click="removeItem(product._id)">
                    <span class="glyphicon glyphicon-minus"></span>
                </button>
            </span>
            <label class="form-control text-center">{{ getItemQty(product._id) }}</label>
            <span class="input-group-btn">
                <button class="btn btn-default" ng-click="addItem(product._id)">
                    <span class="glyphicon glyphicon-plus"></span>
                </button>
            </span>
        </div>
    </div>
</div>
4

1 回答 1

0

查看ui-bootstrap和那里的 Modal 示例。您看到所有图像正在加载的原因是您已内联所有内容。您应该做的是将模态内容放在单独的模板中，并使用 ng-click 指令打开模态对话框。使用 templateUrl 选项将确保在单击而不是之前加载内容

于 2015-06-22T18:57:52.103 回答