避免在点击之前加载模态图像

Question

问题描述：我有一个电子商务应用程序，我必须在其中加载大量产品图片。我们使用 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>

Answer 1

看看 ui-bootstrap 和那边的模态示例。您看到所有图像都被加载的原因是您已经内联了所有内容。你应该做的是将模态内容放在一个单独的模板中，并使用 ng-click 指令打开模态对话框。使用 templateUrl 选项将确保内容在单击时加载，而不是在

之前

避免在点击之前加载模态图像

avoid modal images loading before being clicked

modal-dialog

node.js

imagedownload

angularjs

pug