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

标签 javascript html css image deferred

我实现了模糊效果,使用首先加载的非常小且轻的图像,因为它非常轻,一旦加载背景图像,延迟过程将替换 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/

相关文章:

html - overscroll-behavior 属性不适用于 webview

javascript - Koa - 错误,找不到文件 - 当 html 和 css 位于不同的文件夹中时

JavaScript:用值模拟点击

html - 具有可调整大小的 div 内容的响应式背景

javascript - 使用 getElementsByClassName 触发显示

html - 我的网页在 IE 和 Firefox 中不工作

javascript - 如何防止移动用户的英雄区域文本溢出?

jquery - 如何在中间值选项中打开bootstrap select列表选择

javascript - 如何在嵌套的 ng-repeat 列中使用 angularJS 执行搜索以便首先填充所有行

javascript 和 css 加载