在现代的网页设计中，为了提高用户体验和网站性能，图片懒加载已经成为一个常见的技术。图片懒加载可以减少初始加载时间，延迟加载图片直到用户滚动到它们所在的位置。另外，为了进一步提升用户体验，添加淡入效果可以使页面更加平滑和吸引人。在本文中，我们将学习如何使用JavaScript实现图片懒加载的淡入效果。
第一步是确定哪些图片需要延迟加载。通常，我们将 img 标签的 src 属性设置为空，然后将真实的图片地址保存在一个自定义属性中，比如 data-src。这样在页面加载时，图片不会被加载，只有当用户滚动到图片所在位置时，才会加载真实的图片地址并进行渲染。
<img class="lazy-img" data-src="path/to/image.jpg" src="" alt="Lazy Image">接下来，我们需要添加一些JavaScript代码来实现懒加载效果。我们将对用户滚动事件进行监听，并检查哪些图片位于可视区域内。对于可视区域内的图片，我们将其真实地址（即data-src属性的值）赋给src属性，从而实现图片的加载。
// 获取所有拥有lazy-img类的图片元素
const lazyImages = document.querySelectorAll('.lazy-img');
// 监听用户滚动事件
window.addEventListener('scroll', function() {
// 循环遍历所有图片元素
for (let i = 0; i < lazyImages.length; i++) {
// 检查图片元素是否在可视区域内
if (isInViewport(lazyImages[i])) {
// 将真实的图片地址赋给src属性
lazyImages[i].src = lazyImages[i].getAttribute('data-src');
// 添加淡入效果
lazyImages[i].classList.add('fade-in');
}
}
});
// 检查元素是否在可视区域内的函数
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth));
}在上面的代码中，我们使用了一个 isInViewport() 函数来检查图片元素是否在可视区域内。该函数通过调用 getBoundingClientRect() 方法来获取元素的位置信息，并与窗口的高度和宽度进行比较。如果元素在可视区域内，则返回true。
最后，我们还可以为图片添加淡入效果，使其在加载完成后平滑地显示在页面上。我们为图片元素添加一个fade-in类，这样在图片加载完成后，会触发CSS过渡效果，从而实现淡入的动画效果。
.lazy-img {
opacity: 0;
transition: opacity 0.3s ease-in;
}
.lazy-img.fade-in {
opacity: 1;
}在上述代码中，我们通过初始将图片的不透明度设置为0，然后使用CSS过渡效果将其逐渐过渡到完全不透明（即1）。此过程持续时间为0.3秒，并以渐入的方式进行。
通过以上步骤，我们可以通过JavaScript来实现图片懒加载的淡入效果。这不仅可以提高网站性能和用户体验，还可以使网站看起来更加平滑和吸引人。
示例2：
document.addEventListener('DOMContentLoaded', function() {
var lazyImages = [].slice.call(document.querySelectorAll('img[data-src]'));
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.classList.add('fade-in');
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// 回退方案：简单的onload加载
lazyImages.forEach(function(lazyImage) {
lazyImage.src = lazyImage.dataset.src;
});
}
});
// CSS 示例
/* 淡入效果 */
.fade-in {
transition: opacity 1s;
opacity: 0;
}
/* 图片加载后的样式 */
.fade-in[src] {
opacity: 1;
}♥ 关于：[].slice.call( arguments）
[].slice.call(document.querySelectorAll('selector')).forEach((el)=>{...})它的目的：将arguments对象的数组提出来转化为数组，arguments本身并不是数组而是类数组对象；
它的用处：document.querySelectorAll()选择出来的伪数组需要遍历时，调用这个方法来将伪数组转化为数组，然后调用forEach方法来遍历。
这段代码使用了IntersectionObserver来监听图片何时进入视口，并触发图片的懒加载。如果浏览器不支持IntersectionObserver，则会加载所有图片，并没有懒加载效果。同时，它还为图片添加了一个fade-in类，该类在CSS中定义了一个淡入效果。这样，当图片加载完成后，会有一个淡入的过渡效果。
