I didn't seem to find the callback after loading the image, so I added a paragraph myself.
Evllis opened this issue · comments
Alliestrasza commented
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 = '';
}
}
});