Image lazy loading (compatibility with lazyload.js) #24

tim-peterson opened this Issue Dec 26, 2012 · 5 comments


None yet

3 participants


It would be really cool if holder.js and lazyload.js worked together. The justification for this is that these two plugins have highly complementing roles in handling image loading.

The two main problems with making these two plugins compatible are:

  1. that lazyload only accepts properly specified src="/img/bg.png" or background-image=url("/img/bg.png") attributes. It can't handle the holder.js syntax/data-src.
  2. Responsive images (% instead of px) don't work since holder converts <img> tags with %width/height to <div>s thereby creating incompatibility with lazyload.

What are people's thoughts on image lazyloading?

imsky commented Jan 1, 2013

Could you let me know how you aim to use lazyload.js with Holder?


hi @imsky, I would just like to replace the Holder.js drawn <canvas> placeholders with the actual <img> or background-image as specified by lazyload.js. An example use would be in a newsfeed/endless scroll-like list like one sees on many popular sites.

Ideally the canvases would be drawn responsively (% instead of px height/width) such that they, like the images which will replace them, could fit multiple form factors.

@imsky imsky added a commit that closed this issue Jan 1, 2013
@imsky lazyload.js support, fix #24 4f0d9c7
@imsky imsky closed this in 4f0d9c7 Jan 1, 2013
imsky commented Jan 1, 2013

I've added support for fluid placeholders, fixed-width placeholders work well with lazyload.js. Let me know how it works for you.


hi @imsky this is awesome, i'll check it out!

tuupola commented Jan 3, 2013

Awesome. Thanks for the fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment