toddmotto / echo

Lazy-loading images with data-* attributes

Home Page:http://toddmotto.com/labs/echo

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

I didn't seem to find the callback after loading the image, so I added a paragraph myself.

Evllis opened this issue · comments

At present, there is no problem. In this case, I need to do some operations after loading the image. Feasible.

for (var i = 0; i < length; i++) {
    elem = nodes[i];
    if (inView(elem, view)) {

        if (unload) {
            elem.setAttribute('data-echo-placeholder', elem.src);
        }

        if (elem.getAttribute('data-echo-background') !== null) {
            elem.style.backgroundImage = "url(" + elem.getAttribute('data-echo-background') + ")";
        } else {
            elem.src = elem.getAttribute('data-echo');
            // Add the callback after the completion of listening picture loading
            nodes[i].onload = function() {
                callback(this, 'success');
            }
        }

        if (!unload) {
            elem.removeAttribute('data-echo');
            elem.removeAttribute('data-echo-background');
        }

        callback(elem, 'load');
    } else if (unload && !!(src = elem.getAttribute('data-echo-placeholder'))) {

        if (elem.getAttribute('data-echo-background') !== null) {
            elem.style.backgroundImage = "url(" + src + ")";
        } else {
            elem.src = src;
        }

        elem.removeAttribute('data-echo-placeholder');
        callback(elem, 'unload');
    }
}
if (!length) {
    echo.detach();
}

The front-end judges whether the currently loaded image is complete or not through the success field of Op.
(PS: success is defined by yourself)

echo.init({
    offset: 100,
    throttle: 250,
    unload: false,
    callback: function (element, op) {
        if (op === 'success') {
            $(element).parent()[0].style.backgroundColor = '';
        }
    }
});