JS实现非首屏图片延迟加载可以提高网站的性能，避免一次性加载全部图片对网站造成的压力，下面详细介绍实现的攻略：
1. 了解非首屏图片延迟加载
首先需要了解什么是非首屏图片延迟加载，它的原理是在网站的加载过程中，只加载当前屏幕所需展示的图片，等到用户滚动到相应位置时再加载相应的图片。这样做可以减少首屏加载时间，提高网站加载速度。
2. 实现延迟加载的JS代码
为了实现延迟加载，可以使用以下的JS代码：
function lazyLoad() {
let images = document.querySelectorAll('img[data-src]');
let len = images.length;
for (let i = 0; i < len; i++) {
let rect = images[i].getBoundingClientRect();
if (rect.bottom >= 0 && rect.top < document.documentElement.clientHeight) {
if (images[i].getAttribute('src') !== images[i].getAttribute('data-src')) {
images[i].src = images[i].getAttribute('data-src');
}
images[i].removeAttribute('data-src');
}
}
}
window.addEventListener('scroll', lazyLoad);
这段代码使用了getBoundingClientRect()方法获取元素距离屏幕顶部和底部的距离，判断是否在屏幕范围内。同时使用了data-src属性来保存图片真实地址，避免在加载过程中首先加载了placeholder图片或其他小图，减少请求数据，提高性能。最后添加了scroll事件，实现滚动延迟加载。
3. 使用示例
下面提供2个使用示例：
示例1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Lazy Load</title>
<style>
img {
width: 300px;
height: auto;
margin: 20px;
}
.box {
height: 1500px;
}
</style>
</head>
<body>
<div class="box">
<img data-src="https://picsum.photos/400/600?random=1">
<img data-src="https://picsum.photos/400/600?random=2">
<img data-src="https://picsum.photos/400/600?random=3">
<img data-src="https://picsum.photos/400/600?random=4">
<img data-src="https://picsum.photos/400/600?random=5">
<img data-src="https://picsum.photos/400/600?random=6">
<img data-src="https://picsum.photos/400/600?random=7">
<img data-src="https://picsum.photos/400/600?random=8">
</div>
<script>
function lazyLoad() {
let images = document.querySelectorAll('img[data-src]');
let len = images.length;
for (let i = 0; i < len; i++) {
let rect = images[i].getBoundingClientRect();
if (rect.bottom >= 0 && rect.top < document.documentElement.clientHeight) {
if (images[i].getAttribute('src') !== images[i].getAttribute('data-src')) {
images[i].src = images[i].getAttribute('data-src');
}
images[i].removeAttribute('data-src');
}
}
}
window.addEventListener('scroll', lazyLoad);
</script>
</body>
</html>
在本示例中，页面中一共有8张图片，但一开始仅加载了placeholder图片，在滚动页面的时候才会去加载真实图片。这样可以避免在页面加载过程中一次性请求所有图片，减轻服务器负担，提高网站性能。
示例2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Lazy Load</title>
<style>
img {
width: 300px;
height: auto;
margin: 20px;
}
.box {
height: 1500px;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="box">
<img data-src="https://picsum.photos/400/600?random=1">
<img data-src="https://picsum.photos/400/600?random=2">
<img data-src="https://picsum.photos/400/600?random=3">
<img data-src="https://picsum.photos/400/600?random=4">
<img data-src="https://picsum.photos/400/600?random=5">
<img data-src="https://picsum.photos/400/600?random=6">
<img data-src="https://picsum.photos/400/600?random=7">
<img data-src="https://picsum.photos/400/600?random=8">
</div>
<script>
function lazyLoad() {
let images = document.querySelectorAll('img[data-src]');
let len = images.length;
for (let i = 0; i < len; i++) {
let rect = images[i].getBoundingClientRect();
if (rect.bottom >= 0 && rect.top < document.documentElement.clientHeight) {
if (images[i].getAttribute('src') !== images[i].getAttribute('data-src')) {
images[i].src = images[i].getAttribute('data-src');
}
images[i].removeAttribute('data-src');
}
}
}
$(function() {
lazyLoad();
$(window).scroll(function() {
lazyLoad();
});
});
</script>
</body>
</html>
本示例中使用了jQuery库，主要是为了方便实现懒加载的效果。原理与前示例相同，区别在于使用了$(document).ready()函数或$()函数，以确保在文档结构出现后再执行JS代码，防止因为JS代码在DOM元素还未出现时运行造成的错误。同时添加了scroll事件，实现滚动延迟加载。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现非首屏图片延迟加载的示例 - Python技术站
微信扫一扫 
支付宝扫一扫 