Defer or Delay loading large images on a single page site

Question

I am working on a simple single-page product site using the Isotope (jquery) plugin.

There are to be 27 minimised Isotope elements (one for each product) that can be maximised on click to reveal large images and text. Each Isotope element looks like shown below.

Being a single-page site, the large images are loaded as per their location in the DOM and hidden from view. Therefore, all 27 small ProductName.jpg images are not loaded in their entirety first, and the large ProductName#.jpg images after. On slow connections, it takes too long for all 27 small images to appear, because the browser requests each image as it appears in the DOM. A mock-up is here

What could I do to defer the loading of all large images for each maximised Isotope element to after the 27 small images are requested and rendered by the browser?

Is there some kind of "delay" plug-in that can be set to fire after a certain event or user interaction I can hook to?

All I have found was "lazy load" plug-ins that look for scroll-events; all I need here though, because I don't have "scroll into view" content, this being a single-page site, is some method for delaying loading of the initially hidden large slideshow images.

Thanks in advance for some suggestions!

    <div class="item large" data-item="Product Name">
        
        <div class="header active">
        
            <div class="status"></div>
            
            <h1>Product Name</h1>
            <h2 lang="sv">Product Descriptor</h2>
            <h2 lang="en">Product Descriptor</h2>
            <h2 lang="de">Product Descriptor</h2>
            
        </div>
        
        <div class="minimised" style="background-color: #fff">
        
            <img src="media/ProductName.jpg" width="312" height="312" alt="#"/>
             
        </div>
        
        <div class="maximised">
        
            <h2 lang="sv">#</h2>
            <h2 lang="en">#</h2>
            <h2 lang="de">#</h2>
            <div class="slideshow">
                <img src="media/ProductName1.jpg" width="640" height="960" alt="#"/>
                <img src="media/ProductName2.jpg" width="640" height="960" alt="#"/>
                <img src="media/ProductName3.jpg" width="640" height="960" alt="#"/>
                <img src="media/ProductName4.jpg" width="640" height="960" alt="#"/>
            </div>
            
            <p lang="sv">#</p>
            <p lang="en">#</p>
            <p lang="de">#</p>
            
            <p lang="sv" class="infoheader">#</p>
            <p lang="en" class="infoheader">#</p>
            <p lang="de" class="infoheader">#</p>
            <p lang="sv" class="infotext">#</p>
            <p lang="en" class="infotext">#</p>
            <p lang="de" class="infotext">#</p>
            <img class="info" src="media/IconColoursProductName.png" width="212" height="32" alt="#"/>
            
            <p lang="sv" class="infoheader">#</p>
            <p lang="en" class="infoheader">#</p>
            <p lang="de" class="infoheader">#</p>
            <p lang="sv" class="infotext">#</p>
            <p lang="en" class="infotext">#</p>
            <p lang="de" class="infotext">#</p>
            <p lang="sv" class="infotext">#</p>
            <p lang="en" class="infotext">#</p>
            <p lang="de" class="infotext">#</p>
            
            <p lang="sv" class="infoheader">#</p>
            <p lang="en" class="infoheader">#</p>
            <p lang="de" class="infoheader">#</p>
            <a href="media/ProductName.pdf" target="_blank"><img class="info" src="media/IconAdobePDF.png" width="32" height="32" alt="#"/></a>
            <p> </p>
            
        </div>
        
    </div>

score 0 · Answer 1 · edited May 23 '17 at 11:59

After much time, I found out how to do it without any "lazy load" plug-in via https://stackoverflow.com/a/17735541/963514 from user seandebutts. This bit of javascript delays the loading of large images, attributed with a class of .delay, by -suitable for my case - 1 second. Now the site behaves well - renders quickly and by the time a user clicks an Isotope item, the images therein are loaded.

<script type="text/javascript">
$(document).ready(function () {
  setTimeout(function () {
    $('.delay').each(function () {
      var imagex = $(this);
      var imgOriginal = imagex.data('original');
      $(imagex).attr('src', imgOriginal);
    });
  }, 1000);
});
</script>

Defer or Delay loading large images on a single page site

1 Answers1