Consider adding lazyLoad support

[anderssonola]

Hi @nathanaeljones,

How's your standpoint on adding lazyload support to slimmage?

Basic requirements:

• Triggered on DOMContentLoaded and fallback to onload for legacy IE
• Only load images that are visible in viewport
• Load the non-visible images on scroll or window resize

[lilith]

If you mean postpone, per the Resource Priorities definition, it already does - you just add 'postpone' to the <img> tag.

I need to find the Google Chrome interview video - but basically anything happening on a mobile device shouldn't use 'postpone' behavior. Nearly all battery drain is from turning the radio on/off, so having all page requests happen at once is a good thing (tm) for battery life.

[anderssonola]

Yeah I saw the 'postpone', but the support is more than limited at the moment.

My thought was to incorporate the concepts from https://github.com/tuupola/jquery_lazyload and only insert the image-ref to src-attribute when the image is "in" the viewport

[lilith]

Slimmage can't achieve its goals if it gets too bloated, and I think that lazy loading has been proven to be counterproductive in most scenarios.

I would be interested in seeing slimmage work alongside a separate lazyload module or jquery plugin. I don't see any reason that shouldn't be possible. By definition, conventional lazy loading breaks accessibility and forfeits graceful degradation, so there's no need to rely on Slimmage's abilities in that area. Just call checkResponsiveImages() after lazy loading occurs to 'responsify' images that have been hidden.

[anderssonola]

Thanks for the answer @nathanaeljones. You can close the question