3

I am trying to load 5000 images into a webpage, each image has a size of about 120KB. The images are displayed as thumbnails inside a scrollable , and at any time there will be 16 visible images inside that I tried to use Lazyload jquery library but my problem is that the cache of the browser is getting full quickly. Is there any way for loading large number of images without over filling the cache? Thank you in advance Rami

Rami
  • 8,044
  • 18
  • 66
  • 108
  • 2
    Check out [jQuery infinite scroll](http://www.infinite-scroll.com/) – Murali Murugesan Feb 25 '14 at 16:31
  • 1
    using a lazy-loading plugin is a very good idea for this usecase. You can set the header to "no-cache" to controll the client behaviour. Maybe take a look at this thread: http://stackoverflow.com/questions/728616/disable-cache-for-some-images beside the accepted answer you could use the answers that define http headers – Nico O Feb 25 '14 at 16:34
  • 2
    To prevent caching load the images with a fake querystring `"MY_KITTEN.JPG?random12345DateTimeEtc"` – Alex K. Feb 25 '14 at 16:34
  • @AlexK won't that just lead to have `MY_KITTEN.JPG?random12345DateTimeEtc` been chached? Or will images with query string never get cached? This is usefull if you have dynamically changing images with the same filename, but i don't know if a page full of these won't result in a full cache as well. – Nico O Feb 25 '14 at 16:41
  • @NicoO Thank you for your answer, I just tried it out and it didn't work, the browser is still crashing after a while. I don't know how to verify if my problem is in caching or in something else then. I am using Chrome and I don't know how to check if the crash is caused by a full cache now. – Rami Feb 25 '14 at 16:45
  • @NicoO No, a browser should understand the content of an object with a querystring should not be cached http://stackoverflow.com/questions/126772/how-to-force-a-web-browser-not-to-cache-images – Alex K. Feb 25 '14 at 16:48
  • @Rami have you tried the solution with the query string in the file name also? I'am not sure how browsers behave with these. Definitely worth a try. – Nico O Feb 25 '14 at 16:48
  • Thank you @AlexK. interessting topic – Nico O Feb 25 '14 at 16:50
  • what is the point of preloading if don't cache? the problem is that you have to many elements on your page, much less elements, and much less 120kb images at that... – dandavis Feb 25 '14 at 17:08
  • My I ask why you need to load 5000 images in one page? – Asons Feb 25 '14 at 17:14
  • @NicoO, no querystring does not implicitly prevent caching. It will stop the browser from reading from cache when the querystring changes randomly but the cache is still written to. Use headers to prevent caching. That said, browsers don't crash when cache becomes full... Rami's problem lies elsewhere – Robert Levy Feb 25 '14 at 17:16
  • Dear all, indeed as @RobertLevy mentioned, aparently my problem is somewhere else. The propositions of Nico and Alex are valid. I believe that my issue lies in resizing the images to fit the thumbs. Thank you all for your propositions. – Rami Feb 27 '14 at 10:08

0 Answers0