LazyLoad with images wrapped inside divs

Question

I am having an issue with the use of LazyLoad plugin from the original appelsiini.net.

When using the structure of

<img... />
<img... />
<img... />

That above works. But I am having another structure that is needed.

<div class="col-2-3">
    <img lazyload-img ...>
<div>
<div class="col-1-3">
    <p>Title+desc for image</p>
<div>

But for this usage - I am having no luck. I have looked at options, and tried to find answers. But did not.

Is the LazyLoad only for sequential img-tags? Or can this not be done with img-tags wrapped in divs?

Thank you.

Answer 1

Did you try this technique from the plugin page?

When Images Are Not Sequential

After scrolling page Lazy Load loops though unloaded images. In loop it checks if image has become visible. By default loop is stopped when first image below the fold (not visible) is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong. You can control loading behaviour with failure_limit option.

$("img.lazy").lazyload({ failure_limit : 10 });

Setting failure_limit to 10 causes plugin to stop searching for images to load after finding 10 images below the fold. If you have a funky layout set this number to something high.

Answer 2

If you are using Lazy Load 1.8.0 you can specify the containers

$(".col-2-3 img").lazyload({ container: $(".col-2-3") }); 

It would be helpful to see the jQuery used to initialize the lazy load that works.

Answer 3

I tried different things, until I stopped understanding anything about everything.

But later on, when reverting - I did get it to work. But not by adding container or any other special options.

I guess it could have something to do with adding some clearfix to some containers somehow.

Thanks for your responses.

Here is the URL though for you curious people ;) http://snickerietivarberg.se/wordpress/referenser/trapp-trappracken/?codekitCB=400070072.155490