Implementation of laziness

Hi! I was searching for progressive enhancement approaches to lazy loading and found your answer on Stack Overflow intriguing. This looks like a more standards-compliant solution, but I think the lazy component is missing.

If I’m reading your code correctly, this script by itself —i.e. loadMedia()— would still result in the browser downloading every image on the page all at once, instead of waiting for one event or another to fire. I imagine the intended use is for developers to create their own event-listening function that would then call loadMedia('#id') whenever img#id approaches the viewport. Is this correct?

In any case, are you planning on implementing a default listener of some sort, such that loadMedia() by itself would actually result in each image loading only as viewport scrolling approaches it?

[tvler]

Hi! Thanks for reaching out.

Having a loadMedia(‘scroll’) type of feature would be good, but there are so many variable things that can happen to a page to affect an image’s page height that I think developers should implement that themselves. For example if an element is resized or deleted, which causes an image’s position to change, there’s no JavaScript event for me to hook that repositioning logic into.

I think I like that this library right now is just a manual lazyloader, it keeps the code super clean. But I’ll take a look at how the major lazy loaders calculate height. If it looks pretty stable I’ll implement it for this. 👍

[tvler]

I’ve added a scroll option to the loadMedia function:

loadMedia (
   element,
   onload,
   scroll
)

element: CSS String | NodeList | Element

onload: Function (optional)

scroll: Boolean (optional) – loads image when visible

You can check out an example of it on the project’s new website: http://tylerdeitz.co/lazy-progressive-enhancement/

Thanks!