Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Lazy Load Images Only After Bootstrap Modal has Opened

I found two similar answers here but both were unsuccessful for my situation (given my limited ability to translate them to my situation). I have a page with a lot of fairly large images and the default method of Bootstrap is to load all the modal images upon page load. The visible html renders fairly quickly (I have a spinner for that) but the additional load time for the hidden modals makes the page impractical. I want the page to load only the visible (non-modal) content to complete the page load (and clear the spinner) and then load each modal's content only when that modal is fired. I've tried every lazyload solution I could find but the images will not render in the modal (the 'data-src' placeholders render but not the 'src' images that are supposed to replace them). I only want to lazyload (or load on 'show.bs.modal') the large images of the modal, those within the 'modal-body' class. I hope this is clear enough.

Sample code:

/* Javascript placed in the head */

<script>

function lazyLoad(){
    var $images = $('.lazy_load');

    $images.each(function(){
        var $img = $(this),
            src = $img.attr('data-src');

        $img
            .on('load',imgLoaded($img[0]))
            .attr('src',src);
        });
    };

    $('.modal-body').on("show.bs.modal", function () {
    lazyLoad();
};          

</script>

/* HTML in the modal section */


<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="galleryheader">
                <img src="headerimage_1.png" height="77" width="1024">
            </div>
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div>
                        <div class="modal-body lazy_load">
                            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="images/largeimage_1A.jpg" height="585" width="800"class="img-centered" alt=""/>
                        </div>
                        <div class="modal-body lazy_load">
                            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="images/largeimage_1A.jpg" height="585" width="800"class="img-centered" alt=""/>
                        </div>
                        <div class="modal-body lazy_load">
                            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="images/largeimage_1A.jpg" height="585" width="800"class="img-centered" alt=""/>
                        </div>
                    </div>
                </div>
            </div>

                <div class="close-lower" data-dismiss="modal">
                <IMG SRC="images/close.jpg" WIDTH="85" HEIGHT="32"></a>
                </div>
            </div>
        </div>
</div>
like image 556
evanonearth Avatar asked Oct 06 '16 00:10

evanonearth


People also ask

How is image lazy load implemented?

Lazy Loading Techniques for images. Images on a webpage can be loaded in two ways - using the <img> tag, or using the CSS `background` property. Let's first look at the more common of the two, the <img> tag, and then move on to CSS background images.

Is lazy loading images good?

You should always use lazy loading for the images below the fold. As we explained, lazy loading will reduce the real and perceived loading time. User experience will benefit from it — and you users will thank you.

Does lazy loading improve performance?

Today, lazy loading is widely used in web applications to improve application performance. It helps developers reduce loading times, optimize data usage and improve the user experience. However, overusing lazy loading can affect the application performance negatively.

How do you apply lazy loading?

To lazy load an image, display a lightweight placeholder image, and replace with the real full-size image on scroll. There are several technical approaches to lazy loading images: Inline <img> tags, using JavaScript to populate the tag if image is in viewport. Event handlers such as scroll or resize.


1 Answers

Firstly, put the lazy_load class on the img element, not on the parent div. Secondly the jQuery you need is something like this:

$('.portfolio-modal').on("show.bs.modal", function () {
    $('.lazy_load').each(function(){
        var img = $(this);
        img.attr('src', img.data('src'));
    });
});          

Notes:

  1. Use the portfolio-modal class to identify the modal.
  2. Use the jQuery data() method to get the image to lazily load.
like image 56
DavidG Avatar answered Oct 10 '22 13:10

DavidG