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