Lazy load

Browsers load images even if they are removed with JavaScript. All images in the example below will be downloaded right away:

<div class="fotorama">
  <img src="1.jpg">
  <img src="2.jpg">
</div>

If you don’t worry about browsers with no JavaScript, turn on lazy loading by altering your HTML:

<div class="fotorama">
  <a href="1.jpg"></a>
  <a href="2.jpg"></a>
</div>

Add thumbnails:

<div class="fotorama">
  <a href="1.jpg" data-thumb="1_thumb.jpg"></a>
  <a href="2.jpg" data-thumb="2_thumb.jpg"></a>
</div>

All fotoramas here are using this method of image embedding.