Prevent loading images when display:none

[damdec]

Hi,

First of all, thank you for your script, it's pretty handy !

As you may know, even when images are hidden with CSS (display:none...), the browsers still load them. It could be interesting to check the "display" status (as an option or by default) to optimize page speed.

I just added a line in the "inViewport" method :

var display = (typeof getComputedStyle == 'function') ? window.getComputedStyle(elt).getPropertyValue('display') : null ;

var visible =
    display != 'none' &&
    pos.left >= -offset &&
    pos.left <= viewport.width &&
    pos.top >= -offset &&
    pos.top <= viewport.height;

As a result, it solves this kind of problem http://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading.

Feel free to use this code in the next version !

Regards.

[vvo]

So you are talking about not loading lazyloaded images that are hidden by a display:none property.

That's a edge case but I am willing to take try it, feel free to do a PR and add a new test, it should be easy to do.

[vvo]

Submit a PR