avoid modal images loading before being clicked

Question

Problem Description: I have an e-commerce application, in which I have to load a lot of product images. We used 200*200 images for small images, but there are modals which are 600*600 in size and appear when clicked on any product.

The problem is, when each page is loaded, all the images (200*200 and 600*600) are getting loaded, which is making the application too slow.

Question: Is there any way to avoid the (600*600) images to load before being clicked. I would like the application to load only the 200*200 images initially and load any 600*600 image on request.

Technology: (Jade, Angularjs, Nodejs)

Code:

<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

Look at ui-bootstrap and the example for Modal over there. The reason you see all images being loaded is that you have inlined all your content. What you should do is put the modal content in a separate template and use the ng-click directive to open the modal dialog. Using the templateUrl option will ensure that content is loaded when clicked and not before