3

I'm using fotorama.io on my site and I have a large gallery of images in the slider (60-80) so I followed the suggestion in the manual to use Lazy Load to not load all my images at once.

But when I browse images and already reached 40+ images, my browser memory is overloaded and the browser is starting to respond slowly, I have Memory Restart plugin for Firefox which shows my memory to build up very high.

Is there a way to use lazy load and keep for example 10 images, and unload all the not visible or images that are as far as 10+ to unload so that memory is cleared?

Mario Boss
  • 1,784
  • 3
  • 20
  • 43
Seb
  • 113
  • 1
  • 4
  • 12

3 Answers3

1

It is interesting question! I don’t now is it possible to unload images from memory, I think browsers have to manage it automatically. By the way, Fotorama detaches invisible images. Аs I know it is the best practice for large galleries.

Art
  • 1,023
  • 1
  • 7
  • 15
1

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.

bssilveira
  • 19
  • 2
1

If want to lazy load on img tag just put the width and height.

Example :

<div class="fotorama" width="360" and height="360">
 <img src="1.jpg">
 <img src="2.jpg">
</div>

And its work!

PS: Tested responsive website and all browsers.

atakan aydın
  • 71
  • 7