Only load lightbox image on click - Reduce page loading time

Question

I coded a press page with some simplistic CSS lightbox code, it worked quite well until the loading time of the page became insane because it was loading all the images before they're even displayed.

With 10 or 12 images it was fine, but I've since added more images to the page and now it's a huge beast. I've implemented lazy-loading for the image covers, that's improved things a little.

The only thing I need now is for the lightbox images to load on click, not when you first navigate to the page. I'm looking for a simple html or CSS solution, but would settle for a Javascript or Jquery one if need be.

A link to the page:

http://agentboris.com/press/index-2.php#_

Here is the HTML for the image that includes the lightbox effect and lazy-loading:

Click to View

<a href="#_" class="lightbox parastyle" style="text-decoration: none; color: black;" id="moon2">
<br /><p class="parastyle" style="letter-spacing: 0.1em; text-decoration: none; color: black;">&#8592; BACK <br/></p>
  <img src="images/lightbox-placeholder.png" data-src="images/moon2.jpg" height="353" width="753" class="round arrow-over">
</a>

And the CSS:

/** LIGHTBOX MARKUP **/

.lightbox {
    /** Default lightbox to hidden */
    display:none;
    /** Position and style */
    position: absolute;
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 10000px;
    left: 0;    
    background-color: #fafbff;
    overflow:auto;
}


.lightbox img {
    /** Pad the lightbox image */
    /*max-width: 90%;*/
    margin-top: 2%;
    border: solid 1px #E0E0E0;
}


.lightbox:target {
    /** Remove default browser outline */
    outline: none;
    position: fixed;
    top: 0;
    left: 0;    

    /** Unhide lightbox **/
    display: block;
}

Answer 1

Simply use lazySizes . Only thing you have to do is to alter your markup and add the class lazyload (assuming you already have data-src ):

<img src="images/lightbox-placeholder.png" data-src="images/moon2.jpg" height="353" width="753" class="lazyload round arrow-over">

lazySizes then will automatically only load the image if the image becomes visible (by clicking on the thumb).

Answer 2

Not a php guy, but could you not make an API call to grab the image's src, rather than assigning them to an img ?

Meaning, you have XX number of thumbnails (I'm assuming). But it's loading the bigger images that's the problem. Therefore, only have (1) lightbox, but switch out the image src on click.

Also, since you've named all of your images (big) with the suffix of -thumb , you don't really need to make an API call.

HTML

<div class="presscoll">
   <a href="#boris-2014-awards" class="show-lightbox">
      <img src="images/boris-2014-awards-thumb.jpg" width="470" class="round press arrow-over" />
   </a>
   ..... more thumbnails
</div>

Only have (1) of these.

<a href="#_" id="show-lightbox" class="lightbox parastyle" style="text-decoration: none; color: black;" id="boris-2014-awards">
      <br /><p class="parastyle" style="letter-spacing: 0.05em;">&#8592; BACK <br/></p>
      <img src="images/boris-2014-awards.jpg" height="4064" width="800" class="round arrow-over">
    </a>

---

$('.presscoll').on('click' 'a.show-lightbox', function(e) {
     // get src and remove "-thumb"
     var src = $(this).find('img').attr('src');
     src = src.replace('-thumb', '');

     // change image attr
     $('#show-lightbox').find('img').attr('src', src);

     // may need to call lightbox initialize again here
});

Basically we're just listing out all of your thumbnails, but there's no reason to load all XXX of the bigger images. Just have the base elements for the lightbox there and then switch the src on the "big" image. As stated above, you may need to re-call your lightbox.

This isn't tested btw, but the idea will work.