1

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>
4 Leave Cover
  • 1,248
  • 12
  • 40
  • 83

1 Answers1

2

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

Community
  • 1
  • 1
kashesandr
  • 1,521
  • 28
  • 35
  • My intention is to display high definition image (in the modal) to user upon clicking the thumbnail. I assume 10MB could be HD enough? – 4 Leave Cover Dec 22 '16 at 08:03
  • Two images with the same size but different DPI might look very differently. So it depends on plenty of characteristics (dpi, compression algorithm, ...) I think you should read a few technical articles to figure out what is going on. E.g. http://www.vsellis.com/understanding-dpi-resolution-and-print-vs-web-images/ and more here https://www.google.ru/webhp?q=picture+resolution+size+dpi+ppi – kashesandr Dec 22 '16 at 08:18