五分钟教你用JS实现前端优化之懒加载与预加载
文章目录
1. 懒加载（Lazy Loading）1.1 工作原理1.2 优点1.3 懒加载实例
2.预加载（PreLoading）2.1 工作原理2.2 优点2.3 预加载实例
1. 懒加载（Lazy Loading）
懒加载是一种前端优化技术，用于延迟加载页面上的某些内容，以提高初始加载速度和减少初始加载资源的数量。
1.1 工作原理
初始时只加载页面上的必要内容，如可视区域内的图片、文本等。当用户滚动或进行特定操作时，再加载其他内容，如屏幕外的图片、下拉加载更多数据等。通过监听滚动事件或其他交互事件，判断何时加载额外内容。
1.2 优点
减少初次加载时所需的网络带宽和时间。提高页面的响应速度和用户体验。避免在用户未查看的情况下加载不必要的内容。
1.3 懒加载实例
// 1. 监听滚动事件，判断是否加载图片
window.addEventListener('scroll', function() {
// 2. 获取所有需要懒加载的图片元素
const lazyImages = document.querySelectorAll('img[data-src]');
// 3. 遍历每个需要懒加载的图片
lazyImages.forEach(function(img) {
// 4. 判断图片距离顶部的位置是否在可视区域内
if (img.getBoundingClientRect().top < window.innerHeight && img.getAttribute('data-src')) {
// 5. 将data-src属性的值赋给src，触发实际加载
img.setAttribute('src', img.getAttribute('data-src'));
// 6. 清除data-src属性，避免重复加载
img.removeAttribute('data-src');
}
});
});
这段代码里使用了 img.getBoundingClientRect().top 得到了当前图片到顶部位置的距离，当距离小于屏幕长度（即window.innerHeight），则图片在可视区域内需要进行加载。
具体应用
Lazy Loading Example
2.预加载（PreLoading）
预加载是指在实际需要使用资源之前提前将其加载到内存中。这通常应用于图片、视频或其他网络资源，在用户需要访问它们时能够更快地获取和展示。预加载可以改善用户体验，减少等待时间，并在特定场景下提高性能。
2.1 工作原理
预加载通过创建新的 JavaScript Image 对象并设置其 src 属性来实现。当设置了 src 后，浏览器会立即开始加载对应的资源，无需等到该资源显示在页面上才开始加载。当资源被完全加载后，可以根据需要将其添加到页面中显示。
2.2 优点
预加载可以改善用户体验，减少等待时间，并在特定场景下提高性能。
2.3 预加载实例
// 1. 创建一个新的Image对象
const preloadedImage = new Image();
// 2. 设置要预加载的图片的URL
preloadedImage.src = 'path/to/image.jpg';
// 3. 当图片加载完成后执行回调函数
preloadedImage.onload = function() {
console.log('Image preloaded');
// 4. 将图片添加到页面中
document.body.appendChild(preloadedImage);
};
在这个例子中，首先创建了一个新的 Image 对象，然后设置要预加载的图片的 URL。接着监听 onload 事件，当图片加载完成后执行相应的回调函数，在回调函数中可以将图片添加到页面中显示。 这样，在实际需要使用该图片时，由于已经提前加载到内存中，用户可以立即看到图片，而无需再等待加载时间。
具体应用