Wenden Sie einen Fade-Effekt auf verzögerte Bilder an ⇐ CSS

[Anonymous]

Ich habe einen Unschärfeeffekt implementiert, indem ich ein sehr kleines und helles Bild verwendet habe, das zuerst geladen wurde, da es sehr hell ist, und sobald das Hintergrundbild geladen ist, ersetzt der Verzögerungsprozess die Datenquelle durch das tatsächliche Bild.

Mein Problem dabei ist die plötzliche Änderung, die dazu führt, dass das Hintergrundbild blinkt. Ich möchte einen Weg finden, elegant zu „laden“, hauptsächlich mit einem Fade-Effekt.

Unten ist der Code:

Code: Select all

function init() {
let imgDefer = document.querySelectorAll('[data-src]');
for (let i = 0; i < imgDefer.length; i++) {
if (imgDefer[i].getAttribute('data-src')) {
if (imgDefer[i].tagName === 'IMG') {
imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src'));
} else {
let style = "background-image:url({url})";
imgDefer[i].setAttribute('style', style.replace("{url}", imgDefer[i].getAttribute('data-src')));
}
}
}
}

Und das Element:

Code: Select all

 ...