在现代网页设计中，随着图片数量的增加和网络带宽的限制，页面加载速度成为了一个重要的问题。为了提高用户体验和减少服务器负载，图片懒加载技术应运而生。图片懒加载是一种延迟加载图片的技术，只有当图片进入用户的可视区域时才会真正加载图片，从而减少了初始页面加载时的资源请求，提高了页面的加载速度。本文ZHANID将详细介绍使用 JavaScript(以下简称 JS)实现网站图片懒加载的方法，并提供示例代码。
一、图片懒加载的原理
图片懒加载的核心原理是在页面加载时，先不加载图片，而是用一个占位图或者一个默认的小尺寸图片代替真正的图片。当用户滚动页面，使得图片进入可视区域时，再通过 JavaScript 动态地加载真正的图片。这样可以避免在页面加载时同时加载大量图片，从而减少了页面的加载时间和服务器的压力。
二、实现图片懒加载的方法
1、HTML 结构设置
首先，在 HTML 中，为需要懒加载的图片设置一个自定义的属性，比如data-src，用于存储真正的图片地址。同时，可以设置一个默认的占位图或者一个小尺寸的图片作为初始显示。
例如：
<img src="placeholder.jpg" data-src="real-image.jpg">
这里的src属性设置为占位图placeholder.jpg，而真正的图片地址存储在data-src属性中。
2、JavaScript 代码实现
接下来，使用 JavaScript 来实现图片懒加载的功能。主要思路是监听页面的滚动事件，当图片进入可视区域时，将图片的src属性设置为真正的图片地址，从而触发图片的加载。
以下是一个基本的实现步骤：
获取所有需要懒加载的图片元素。
监听页面的滚动事件。
在滚动事件处理函数中，判断每个图片是否进入可视区域。
如果图片进入可视区域，将其src属性设置为data-src的值，开始加载真正的图片。
3、判断图片是否进入可视区域
判断图片是否进入可视区域是实现图片懒加载的关键步骤。可以通过比较图片的位置和浏览器窗口的大小来判断。
一种常见的方法是使用getBoundingClientRect()方法获取图片元素的位置信息，然后判断图片的顶部和底部是否在可视区域内。
例如：
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)
);
}这个函数接受一个元素作为参数，返回一个布尔值，表示该元素是否在可视区域内。
三、示例代码
以下是一个完整的使用 JS 实现图片懒加载的示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
width: 300px;
height: 200px;
margin: 10px;
}
</style>
</head>
<body>
<img src="placeholder.jpg" data-src="image1.jpg">
<img src="placeholder.jpg" data-src="image2.jpg">
<img src="placeholder.jpg" data-src="image3.jpg">
<img src="placeholder.jpg" data-src="image4.jpg">
<img src="placeholder.jpg" data-src="image5.jpg">
<script>
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)
);
}
function lazyLoad() {
const images = document.querySelectorAll('img');
images.forEach(image => {
if (isInViewport(image)) {
image.src = image.dataset.src;
image.onload = () => {
image.classList.remove('lazy');
};
}
});
}
window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);
lazyLoad();
</script>
</body>
</html>在这个示例中，首先在 HTML 中设置了一些图片元素，使用占位图作为初始显示，并将真正的图片地址存储在data-src属性中。然后，在 JavaScript 中定义了isInViewport()函数来判断元素是否在可视区域内，以及lazyLoad()函数来实现懒加载的功能。在lazyLoad()函数中，遍历所有的图片元素，判断如果图片在可视区域内，则将其src属性设置为真正的图片地址，并在图片加载完成后移除lazy类(这里假设为了方便识别懒加载的图片，给图片添加了一个lazy类)。最后，监听页面的滚动和窗口大小变化事件，当发生这些事件时，调用lazyLoad()函数。
四、优化和注意事项
1、节流和防抖
由于滚动事件会频繁触发，如果在每次滚动事件中都进行图片懒加载的判断，可能会导致性能问题。可以使用节流或防抖技术来优化滚动事件的处理，减少不必要的计算。
节流是指在一定时间内只执行一次函数，而防抖是指在事件触发后延迟一段时间执行函数，如果在延迟期间内再次触发事件，则重新计时。
2、预加载
虽然图片懒加载可以减少初始页面加载时间，但当用户快速滚动页面时，可能会出现图片加载不及时的情况。为了提高用户体验，可以在图片即将进入可视区域之前进行预加载。
可以使用new Image()创建一个新的图片对象，并设置其src属性为真正的图片地址，这样可以在后台预先加载图片，当图片进入可视区域时，就可以立即显示。
3、兼容性
在不同的浏览器和设备上，图片懒加载的实现可能会有所不同。需要进行充分的测试，确保在各种环境下都能正常工作。
4、服务器端优化
除了在客户端实现图片懒加载，还可以在服务器端进行优化，比如使用合适的图片格式、压缩图片大小、设置缓存等，以减少图片的加载时间和服务器的压力。
总结
图片懒加载是一种提高网页性能和用户体验的有效技术。通过使用 JavaScript，可以轻松地实现图片懒加载的功能。在实现过程中，需要注意 HTML 结构的设置、判断图片是否进入可视区域的方法以及优化和注意事项。通过合理地使用图片懒加载技术，可以大大减少页面的加载时间，提高网站的性能和用户满意度。希望本文的介绍和示例代码能够帮助你在网站开发中实现图片懒加载的功能。
本文由@战地网 原创发布。
该文章观点仅代表作者本人，不代表本站立场。本站不承担相关法律责任。
如若转载，请注明出处：https://www.zhanid.com/biancheng/1851.html
