javascript - 对延迟的图像应用淡入淡出效果

我实现了一种模糊效果，因为它使用的是非常轻巧的非常小的图像，因为它非常轻便，因此首先将其加载，并且一旦加载了背景图像，延迟处理将用实际图像替换data-src。

我的问题是突然的变化，使背景图像闪烁。我想找到一种以淡入淡出效果优雅地“加载”的方法。

下面是代码：

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')));
            }
        }
    }
}

和元素：

<header class="header header-inverse h-fullscreen p-0 overflow-hidden" data-src="assets/img/headerbg.jpg" style="background-image: url('assets/img/headerbgprev.jpg');"> ... </header>

最佳答案

如所建议的，针对此问题，我使用以下规则创建了一个空的div：

header .preview-bg {
    background-image: url(assets/img/headerbgprev.jpg);
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
}

并将其添加到延迟脚本中：

$(imgDefer[i]).find('.preview-bg').fadeOut(500);

如果有人有更好的选择来防止像这样的特定选择，那么某些东西可以一次处理许多背景图像，请发表评论。

关于javascript - 对延迟的图像应用淡入淡出效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47921201/