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

Question

我正在使用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" > 

Answer 1

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

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

1. 实际上，在将图像源更改为“ TN_december-happy-holidays_2.jpg”图像之前，实际上会调用fadeIn函数，因为在交集上立即触发了加载事件，因为图像的“ christmas-tree” src已被加载。

2. 图像已经完全不透明，因此需要先隐藏它，然后才能淡入。

希望这可以帮助！