dinbror / blazy

Hey, be lazy! bLazy.JS is a lightweight pure JavaScript script for lazy loading and multi-serving images. It's working in all modern browsers including IE7+.
http://dinbror.dk/blazy
MIT License
2.63k stars 355 forks source link

Image not loading if it's not forced to be at least 1x1 #143

Open Spellcoder opened 7 years ago

Spellcoder commented 7 years ago

In this documentation I don't quickly see any comment that you must force your image to take up at least 1x1 space for b-lazy to trigger loading of the image when in view. My justified image grid implementation ala Google Images set's the width css property on the tags based on width/height info provided in data-width/data-height attributes. So I stumpled upon this fact that b-lazy didn't load my images because the fact they had a width > 0 wasn't enough to trigger the loading.

B-Lazy after deciding the image is in view, does a second check to see whether both the offsetWidth and offsetHeight of the image are > 0:

function loadElement(ele, force, options) {
    // if element is visible, not loaded or forced
    if (!hasClass(ele, options.successClass) && (force || options.loadInvisible || (ele.offsetWidth > 0 && ele.offsetHeight > 0))) {

What is the reason the size of the image element needs to be checked, even after it was determined the boundingClientRect is within the visible area? If it's really necessary would it not be enough to have either the offsetWidth or offsetHeight > 0 ? (and add a little comment on why the check is there)

p.s.: thanks for b-lazy :).