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

Question

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

Answer 1

正如所建议的，对于这个问题，我创建了一个空的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);

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

Answer 2

这应该做你需要的。它使用data-src属性标识元素（就像你已经拥有的那样），然后添加一个封面元素（在这种情况下是一个图像，所以如果你愿意，你可以使用图像网址，但它可以是任何东西）。然后它在data-src的url处对图像进行背景加载，并且一旦加载，它就会设置背景图像并淡出封面。

这显然是一个非常通用的解决方案，但它应该足以满足您的需求并能够进行修改，使其能够随心所欲地唱歌或跳舞:)

function init() {
    let imgDefer = document.querySelectorAll('[data-src]');
    for (let i = 0; i < imgDefer.length; i++) {
        (function(deferred) {
          if (deferred.getAttribute('data-src')) {

              var cover = new Image();
              cover.className = "fading-cover";
              deferred.appendChild(cover);

              var preloader = new Image();
              
              // I've added this setTimeout so you can see the effect
              // as if the images are loading for the first time.
              // Remove the setTimeout and leave the preloader.src line
              // in the finished version
              setTimeout(function() {
                  preloader.src = deferred.getAttribute('data-src');
              }, Math.random() * 3000);
              
              preloader.addEventListener("load", function() {
                deferred.style.backgroundImage = "url(" + deferred.getAttribute('data-src') + ")";
                cover.style.opacity = 0;
              });
          }
        })(imgDefer[i]);
    }
}

init();

div.image {
  display: inline-block;
  height: 100px;
  margin: 5px;
  width: 150px;
}
div.image .fading-cover {
  background-color: rgb(150, 150, 150);
  height: 100px;
  opacity: 1;
  transition: opacity 2s;
  width: 150px;
}

<div class="image" data-src="https://cmeimg-a.akamaihd.net/cute-article-rcp/cme/cuteness_data/s3fs-public/diy_blog/Why-Are-Some-Cats-More-Vocal-Than-Others.jpg"></div>
<div class="image" data-src="https://cmeimg-a.akamaihd.net/cute-article-rcp/clsd/getty/f32e47a02653426f8f9dbb1553892225"></div>
<div class="image" data-src="https://cmeimg-a.akamaihd.net/cute-article-rcp/cme/cuteness_data/s3fs-public/diy_blog/14-tips-that-Could-Extend-Your-Cats-Life.jpg"></div>