javascripthtmllightbox2image-preloader

Optimize image load

I am using lightbox2 plugin. I have two images: ori-img.jpg is around 10MB while my thumb-img.jpg is only 200KB. When user click on the thumb-img.jpg, a modal with the ori-img.jpg will be displayed. I want to know if:

  1. The ori-img.jpg (10MB) being loaded when the page loaded? Meaning all original images will be loaded before user even open it?
  2. How to prevent user consume unnecessary additional internet data to load un-open image (original)?

Partial sample code below in gallery.php

<a class="example-image-link" href="images/ori-img.jpg" data-lightbox="example-set" data-title="Original Image">
<img class="example-image" src="images/thumb-img.jpg" alt="Thumbnail Image">
</a>
Solution

  • For what purpose you want to show 10MB images users? Looks to me that they're a bit overweighted and you might optimise the images to something like 1-2MB. It depends on font-end part how the images are being loaded. It's possible to load them dynamically. See example here Loading Images into Div Dynamically, https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/, Programmatically change the src of an img tag.

    lightbox2 won't preload images if you define the HTML like this

    <a href="images/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>

    here some details http://lokeshdhakar.com/projects/lightbox2/#options