当它们通过延迟加载进入视口时，像素化图像动画/过渡

Question

简而言之，我希望我的图像呈现像素化效果，并在短暂延迟后过渡到完全渲染的版本。我现在能找到的唯一例子是下面的例子，它非常棒......

示例：https://aino.agency/

这就是想要的效果。如此像素化，然后在图像渲染时出现一个小动画/过渡。

我有两个代码示例，都使用拉伸较小的 64x64 图像的方法，然后使用

image-rendering: pixelated

提供初始像素化效果。

嵌入在帖子中的第一个示例在加载时使用 JS 交换图像，但这种情况发生得太快，并且即使图像不在视口中也会加载所有图像。所以我需要一种方法来实现这一点并强制执行过渡。这是一个创意网站，因此可以稍微延迟图像以获得效果，因为它不是一个“有趣”的登陆页面。

在下面的第二个 CodePen 版本中，我想我可以在

loading="lazy"

图像的顶部显示第二张图像。然后，当加载图像时，向父 div 添加一个类，该类又可以运行简单的 CSS 动画来转换到完全加载的图像 - 我目前已在

:hover

上设置了演示。

https://codepen.io/moy/pen/QWzQPbG

对人们对此的想法和最佳方法真正持开放态度，因为我知道这不太传统！

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to event handlers here
  }
});

img {
  display: block;
  width: 100%;
  min-width: 100%;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 8px;
  margin: auto;
  max-width: 1000px;
}

.grid__item {
  position: relative;
  image-rendering: pixelated;
  width: calc(50% - 4px);
}

<div class="grid">
  <div class="grid__item">
    <img class="lazy" src="https://haddawaynshite.com/lazy-images/bruce--small.jpg" data-src="https://haddawaynshite.com/lazy-images/bruce.jpg" data-srcset="https://haddawaynshite.com/lazy-images/bruce.jpg 2x, https://haddawaynshite.com/lazy-images/bruce.jpg 1x" alt="ALT TEXT">
  </div>
  <div class="grid__item">
    <img class="lazy" src="https://haddawaynshite.com/lazy-images/grace--small.jpg" data-src="https://haddawaynshite.com/lazy-images/grace.jpg" data-srcset="https://haddawaynshite.com/lazy-images/grace.jpg 2x, https://haddawaynshite.com/lazy-images/grace.jpg 1x" alt="ALT TEXT">
  </div>
  <div class="grid__item">
    <img class="lazy" src="https://haddawaynshite.com/lazy-images/nirvana--small.jpg" data-src="https://haddawaynshite.com/lazy-images/nirvana.jpg" data-srcset="https://haddawaynshite.com/lazy-images/nirvana.jpg 2x, https://haddawaynshite.com/lazy-images/nirvana.jpg 1x" alt="ALT TEXT">
  </div>
  <div class="grid__item">
    <img class="lazy" src="https://haddawaynshite.com/lazy-images/nwa--small.jpg" data-src="https://haddawaynshite.com/lazy-images/nwa.jpg" data-srcset="https://haddawaynshite.com/lazy-images/nwa.jpg 2x, https://haddawaynshite.com/lazy-images/nwa.jpg 1x" alt="ALT TEXT">
  </div>
  <div class="grid__item">
    <img class="lazy" src="https://haddawaynshite.com/lazy-images/zep--small.jpg" data-src="https://haddawaynshite.com/lazy-images/zep.jpg" data-srcset="https://haddawaynshite.com/lazy-images/zep.jpg 2x, https://haddawaynshite.com/lazy-images/zep.jpg 1x" alt="ALT TEXT">
  </div>
  <div class="grid__item">
    <img class="lazy" src="https://haddawaynshite.com/lazy-images/beatles--small.jpg" data-src="https://haddawaynshite.com/lazy-images/beatles.jpg" data-srcset="https://haddawaynshite.com/lazy-images/beatles.jpg 2x, https://haddawaynshite.com/lazy-images/beatles.jpg 1x" alt="ALT TEXT">
  </div>
</div>

Answer 1

这是 IntersectionObserver 上的示例：https://stackoverflow.com/a/67719571/13891083

这是您一直在尝试的示例：https://codepen.io/ijhnpzqc-the-decoder/pen/WNLMBRK

这是它的js代码：

var observer = new IntersectionObserver(observerCallback, observerOptions);

function observerCallback(entries, observer) {
    entries.forEach(entry => {
        if(entry.isIntersecting) {
            entry.target.classList.add("animation");
        }
    });
};

document.querySelectorAll(".pre-load").forEach((e) => {
  observer.observe(e);
});