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

正如所建议的那样，对于这个问题，我使用以下规则创建了一个空的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);

我将此添加到延迟脚本中：

account = Account.objects.filter(user__email="ram@gmail.com")

如果有人有更好的选择来阻止这样的特定选择，那么可以同时对许多背景图像起作用，请发表评论。

Answer 2

这应该做你需要的。它标识具有data-src属性的元素（如您所有），然后添加一个封面元素（在本例中为图像，因此如果您愿意，可以使用图像URL，但它可以是任何内容）。然后它会在data-src的网址上对图像进行背景加载，并且一旦加载，它就会设置背景图像并淡出封面。

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

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>

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

2 个答案: