下面我来详细讲解“基于纯JS实现多张图片的懒加载Lazy过程解析”的完整攻略。
下面我来详细讲解“基于纯JS实现多张图片的懒加载Lazy过程解析”的完整攻略。
背景
在传统的网页中,所有的图片都会在页面加载的时候一次性加载出来,这样会导致网页的加载速度变慢。为了提升网页的加载速度和用户的交互体验,我们可以使用懒加载技术。
懒加载是指在页面滚动到特定区域时,才开始加载相应的资源。通过懒加载,可以减少网页的加载时间,提升网页的性能,并且能够避免用户在等待页面加载时的无聊等待,提高用户的体验感。
实现步骤
第一步:找到需要懒加载的图片
把需要懒加载的图片添加到页面中,并且设置它们的data-src
属性,属性值为真实的图片路径。
<!-- 懒加载的图片 -->
<img class="lazy" data-src="img/picture1.jpg" alt="Picture 1">
<img class="lazy" data-src="img/picture2.jpg" alt="Picture 2">
<img class="lazy" data-src="img/picture3.jpg" alt="Picture 3">
第二步:获取当前可视区域的高度和滚动条的高度
在页面滚动时,需要获取当前可视区域的高度和滚动条的高度。通过获取这些值,可以计算出页面滚动的百分比。
const viewHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; // 当前可视区域的高度
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条的高度
const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; // 页面的总高度
const percent = scrollTop / (scrollHeight - viewHeight); // 滚动的百分比
第三步:判断图片是否已进入可视区域
通过计算出当前滚动的百分比,可以计算出每个图片进入可视区域的临界值threshold
。当图片的顶部 offsetTop
大于等于 threshold
时,说明图片已经进入了可视区域,此时需要加载图片。
const images = document.querySelectorAll('.lazy');
const threshold = 0.5; // 阈值为页面高度的一半
const lazyLoad = (image) => {
if (image.offsetTop < (scrollTop + viewHeight) * threshold && !image.src) {
image.src = image.dataset.src; // 加载图片
}
}
images.forEach(lazyLoad); // 遍历所有懒加载的图片
通过添加滚动事件监听器,可以在页面滚动时响应相应的事件。
window.addEventListener('scroll', () => {
images.forEach(lazyLoad); // 检查所有的懒加载图片
});
示例说明
示例一
假设我们有一个图片列表,所有的图片都使用懒加载技术。这个图片列表会在用户滚动页面时逐渐出现,提高用户体验。下面是这个图片列表的HTML代码片段:
<ul class="image-list">
<li><img class="lazy" data-src="img/picture1.jpg" alt="Picture 1"></li>
<li><img class="lazy" data-src="img/picture2.jpg" alt="Picture 2"></li>
<li><img class="lazy" data-src="img/picture3.jpg" alt="Picture 3"></li>
<li><img class="lazy" data-src="img/picture4.jpg" alt="Picture 4"></li>
<li><img class="lazy" data-src="img/picture5.jpg" alt="Picture 5"></li>
</ul>
接下来,我们可以使用下面的JavaScript代码来实现懒加载:
const viewHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; // 当前可视区域的高度
const images = document.querySelectorAll('.lazy');
const threshold = 0.5; // 阈值为页面高度的一半
const lazyLoad = (image) => {
if (image.offsetTop < (scrollTop + viewHeight) * threshold && !image.src) {
image.src = image.dataset.src; // 加载图片
}
};
const handleScroll = () => {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条的高度
const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; // 页面的总高度
const percent = scrollTop / (scrollHeight - viewHeight); // 滚动的百分比
images.forEach(lazyLoad); // 遍历所有懒加载的图片
};
window.addEventListener('scroll', handleScroll);
当页面滚动时,每个图片都会在它进入可视区域时被加载。通过使用阈值,可以控制图片何时被加载。
示例二
假设我们需要使用懒加载技术加载一个带有背景图片的元素。这是这个元素的HTML代码片段:
<div class="container" data-src="img/background.jpg"></div>
下面是使用JavaScript实现的懒加载代码:
const viewHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; // 当前可视区域的高度
const containers = document.querySelectorAll('.container');
const threshold = 0.5; // 阈值为页面高度的一半
const lazyLoad = (container) => {
if (container.offsetTop < (scrollTop + viewHeight) * threshold && !container.style.backgroundImage) {
container.style.backgroundImage = `url(${container.dataset.src})`; // 加载背景图片
}
};
const handleScroll = () => {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条的高度
const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; // 页面的总高度
const percent = scrollTop / (scrollHeight - viewHeight); // 滚动的百分比
containers.forEach(lazyLoad); // 遍历所有懒加载的容器
};
window.addEventListener('scroll', handleScroll);
当元素进入可视区域时,它的背景图片就会被加载。通过使用阈值,可以控制图片何时被加载。
本文标题为:基于纯JS实现多张图片的懒加载Lazy过程解析
基础教程推荐
- JS实现在线统计一个页面内鼠标点击次数的方法 2023-12-01
- 使用box-sizing让CSS布局更直观 2023-12-22
- CSS在UL LI的样式用法(UI上的应用) 2023-12-20
- Vue页面跳转传递参数及接收 2023-10-08
- vue 中 get / delete 传递数组参数方法 2023-10-08
- ajax响应json字符串和json数组的实例(详解) 2023-01-31
- 往xml中更新节点的实例代码 2023-01-20
- 7.盒子模型.html 2023-10-28
- CSS3中Transition动画属性用法详解 2024-01-20
- vue 组件之间数据传递10种 2023-10-08