Lazy loading images how

Question

I am developing an eshop .At products page based on category i putted some javascript based filtering. However a problem arises if a category has a lot of products. This lin

Answer 1

EDIT: I reread your question & noticed you also want this to work for people with Javascript disabled! Then yes my answer is not acceptable - but I'll leave it for the record.

Here are some Javascript libraries for Image Lazy Loading.

They help you load the images needed when the elements 'would' be in view by simply changing the image src attribute.

• github.com/toddmotto/echo and toddmotto.com/echo-js-simple-javascript-image-lazy-loading : plain JS, IE8+, 2KB, only 5 contributors github.com/toddmotto/echo/graphs/contributors

• github.com/dinbror/blazy/ and dinbror.dk/blog/blazy - plain JS, IE7+, 1.2KB (minified and gzipped), only ONE contributor github.com/dinbror/blazy/graphs/contributors

• github.com/tuupola/jquery_lazyload and www.appelsiini.net/projects/lazyload : jQuery dependency, MIT License, tested with Safari 5.1, Safari 6, Chrome 20, Firefox 12 on OSX & Chrome 20, IE 8 & IE 9 on Windows, Safari 5.1 on iOS 5 both iPhone and iPad. 18 contributors https://github.com/tuupola/jquery_lazyload/graphs/contributors

• github.com/luis-almeida/unveil and luis-almeida.github.io/unveil - special: lightweight version of Lazy Load github.com/tuupola/jquery_lazyload : IE7+, jQuery dependency, MIT License, 5 contributors https://github.com/luis-almeida/unveil/graphs/contributors

• github.com/shprink/BttrLazyLoading and bttrlazyloading.julienrenaux.fr - special: dedicated for responsive designs : jQuery dependency, IE9+, MIT License, 3KB (minified & zipped), 5 contributors github.com/shprink/BttrLazyLoading/graphs/contributors

Important: I am still investigating which of these Javascript libraries is best to use. Do your homework I'd say, take some time to search what's the best tool for the job. My requirements are usually: license, dependencies, browser support, device support, weight, community, and history.