尝试在图像加载到文件夹下方时淡入图像答案

【问题标题】：Trying to fade in images as they load below the folder尝试在图像加载到文件夹下方时淡入图像
【发布时间】：2018-11-30 08:21:36
【问题描述】：

当原始图像进入用户的视口时，我使用IntersectionObserver 将初始加载的图像替换为另一个图像。

我希望图像淡入，而不是直接替换。

我已尝试将 Jquery 加载程序添加到图像中，但它无法正常工作。

function fadeIn(obj) {
  $(obj).fadeIn(1000);
}

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).on('load', fadeIn(lazyImage));
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<img 
class="lazy" 
src="https://classroomclipart.com/christmas-tree-with-bright-lights-decoration-animated-clipart-motion-lights-gifts-presents-2.gif"
data-src="https://classroomclipart.com/TN_december-happy-holidays_2.jpg"
data-srcset="https://classroomclipart.com/sm-santa-claus-and-reindeer-singing-christmas-carols-clipart.jpg 2x, https://classroomclipart.com/TN_december-happy-holidays_2.jpg 1x"
width="100"
height="100"
>

【问题讨论】：

您是否可以选择使用 CSS 来实现这一点？还是你绑定到 JQuery？
不，不绑定到 Jquery。

标签： javascript jquery intersection-observer

【解决方案1】：

这是一个使用 jQuery 动画效果很好的解决方案：https://jsfiddle.net/ea7fxrL5/

据我所知，您当前的代码存在两个问题：

fadeIn 函数实际上是在图像源更改为“TN_december-happy-holidays_2.jpg”图像之前调用的，因为加载事件会在交叉路口立即触发，因为图像的“圣诞树” " src 已经加载完毕。
图像已经完全不透明，因此需要先将其隐藏，然后才能将其淡入。

希望这会有所帮助！

【讨论】：