JS实现网页首屏外图片延迟加载的策略与代码示例

本文档详细介绍了如何在JavaScript中实现网页图片的非首屏延迟加载（懒加载）来优化页面性能。主要关注两个关键点：图片的判断逻辑和加载控制。 首先，目标是通过减少不必要的资源加载来提升页面加载速度，这可以通过只在用户滚动到可视区域时加载图片来实现。这样可以避免在页面初次加载时就下载所有图片，从而减轻服务器负担，提高用户体验。 1. 判断图片加载时机：为了确定哪些图片应立即加载，作者提出利用`getBoundingClientRect()`方法。这个方法返回元素相对于视口的位置信息，包括元素的top和right坐标。当图片的上边界(top)位于视口的顶部或其下边界(boundingClientRect.bottom)位于视口底部时，表明图片至少有一部分在屏幕上可见，此时应该加载图片。反之，如果图片超出视口范围，则暂时不加载，等待用户滚动到其所在位置。 2. 控制图片加载：实现这一功能的关键在于图片的src属性。通常，初始时图片的src为空或者设置为占位符（如data-src），在用户滚动到图片时动态改变其src属性为实际的图片链接。这样浏览器会检测到src属性的变化，触发图片的加载。例如，文档中的示例代码展示了如何使用`data-src`属性来存储图片链接，并在需要时将其赋值给`src`，从而达到延迟加载的效果。 整个过程涉及到了JavaScript的事件监听（比如滚动事件）、DOM操作以及条件判断。通过这种方式，可以显著改善网页性能，特别是在内容较多且图片密集的页面中。这种技术不仅适用于图片，也可以扩展到其他需要延迟加载的资源，如视频或音频，只要能够判断出资源是否在用户的当前视口中。