'Lazyload images in three CSS3 columns

I have a website which displays images in three columns. These are all img tags in a div which has column-count: 3 applied.

These columns contain over a hundred images which I want to lazy load to conserve bandwidth.

There are lots of Javascript plugins available like http://www.appelsiini.net/projects/lazyload which work great when not using column-count. These plugins calculate the top offset of the image and determines if the image is visible.

With column-count however, these plugins fail to lazyload the images. This is probably caused by the flow of the columns changing then the images are loaded.

Does anyone know a have an idea on how to approach this problem? I have created a Fiddle which shows the HTML and CSS used: http://jsfiddle.net/LCbTc/2/

javascriptjqueryhtmlcss


Solution 1:[1]

The plugin you mention has an option for this case (scroll to the When Images Are Not Sequential section)..

$("img.lazy").lazyload({
    failure_limit : 999 /*the 999 should be a number larger than the number of images you have*/
});

As mentioned in that section the plugin assumes that the images appear in the same order they are in the HTML. Setting this option to a larger number that the number of lazy loaded images in the page (worst case scenario for the plugin) means that it will check all images and not stop after finding some images outside of viewport.

Demo with your code updated: http://jsfiddle.net/LCbTc/1/

Solution 2:[2]

I have web pages with two columns that contain images. I set the first column images' class to "lazy" and the second column images' class to "lazy-sidebar". Then I invoke lazyload twice, once for each class. Works like a charm!

You could try to set the class programmatically based on which column you image will appear in. Eg., with 100 images in 3 columns I'd set the class "lazy1" for first 34 images, class "lazy2" for next 33 images, and "lazy3" for the remainder. Or something along those lines. Good luck!

Solution 3:[3]

My solution is creating multiple monochrome images of the same height and width as the original ones. They force the columns to fully load, but they don't use much traffic. When the user scrolls the page, the original images start to replace them.

<img src="images/monochrome.jpg" data-src="images/original.jpg">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Bogdan
Solution 3 KatiaSparks

Related Questions