js代码|网站优化之图片懒加载（js图片懒加载怎么实现）
时间：2021-08-26 09:58:46 阅读：1187
今天发一下“懒加载”的代码，请自行参考使用。
至于什么是懒加载，请自行百度。
已经注释了，还看不明白就别瞎改代码哦。
方案1.
代码：
Markup
<body>
<p>
<img class="zshaowl" www.zshao.vip="https://www.zshao.vip/zb_users/upload/logo/%E9%80%8F%E6%98%8E%E7%AE%80%E6%98%93logo.png">
</p>
<p>
<img class="zshaowl" www.zshao.vip="https://www.zshao.vip/zb_users/upload/2021/07/202107191626675555389727.png">
</p>
<p>
<img class="zshaowl" www.zshao.vip="https://www.zshao.vip/zb_users/upload/2021/07/202107131626140251610706.png">
</p>
<p>
<img class="zshaowl" www.zshao.vip="https://www.zshao.vip/zb_users/upload/2021/06/202106161623823043193335.png">
</p>
<p>
<img class="zshaowl" www.zshao.vip="https://www.zshao.vip/zb_users/upload/2021/06/202106151623755521831422.png">
</p>
<!--
主要的是图片代码中的【class="zshaowl"】和【www.zshao.vip】
把原来的图片 src替换成www.zshao.vip-->
<style>
//已经写好CSS的网站，可以不用这个css，这个是用来演示的。
body {
text-align: center;
}
img {
width: 100%;
max-width: 300px;
height: 200px;
margin-bottom: 100px; // 为了方便看效果，将图片尽可能的撑开
}
</style>
<script language="javascript">
// 图片懒加载类
class zshaowl {
constructor(el) {
this.imglist = Array.from(document.querySelectorAll(el)); // 需使用懒加载的图片集合
this.init(); // 初始化
}
// 判断是否该图片是否可以加载
canILoad() {
let imglist = this.imglist;
for (let i = imglist.length; i--;) {
// 缩写，相当于if true
this.getBound(imglist[i]) && this.loadImage(imglist[i], i);
}
}
// 获取图片与窗口的信息
getBound(el) {
let bound = el.getBoundingClientRect();
let clientHeight = window.innerHeight;
// 图片距离顶部的距离 <= 浏览器可视化的高度，从而推算出是否需要加载
return bound.top <= clientHeight - 100; // -100是为了看到效果，您也可以去掉
}
// 加载图片
loadImage(el, index) {
// 获取之前设置好的www.zshao.vip值
let src = el.getAttribute('www.zshao.vip');
// 赋值到src，从而请求资源
el.src = src;
// 避免重复判断，已经确定加载的图片应当从imglist移除
this.imglist.splice(index, 1);
}
// 当浏览器滚动的时候，继续判断
bindEvent() {
window.addEventListener('scroll', () => {
this.imglist.length && this.canILoad();
});
}
// 初始化
init() {
this.canILoad();
this.bindEvent();
}
}
// 实例化对象，参数则是需要使用懒加载的图片类名
const lazy = new zshaowl('.zshaowl')
</script>
</body>方案2.
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Lazyload 2</title>
<style>
img {
display: block;
margin-bottom: 50px;
height: 200px;
}
</style>
</head>
<body>
<img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/fc1.jpg">
<img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/hpjy2.jpg">
<img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/cf1.jpg">
<img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/wzry1.jpg">
<img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/wzry2.jpg">
<img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/cf3shouyou.jpg">
<img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/hpjy1.jpg">
<img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/fc1.jpg">
<img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/logo.png">
<img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/fc1.jpg">
<img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/fc1.jpg">
<img src="http://www.clxsite.cn/img/loading.gif" data-src="http://www.clxsite.cn/img/cover/a/fc1.jpg">
<script>
function throttle(fn, delay, atleast) {
var timeout = null,
startTime = new Date();
return function() {
var curTime = new Date();
clearTimeout(timeout);
if(curTime - startTime >= atleast) {
fn();
startTime = curTime;
}else {
timeout = setTimeout(fn, delay);
}
}
}
function lazyload() {
var images = document.getElementsByTagName('img');
var len = images.length;
var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
return function() {
var seeHeight = document.documentElement.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for(var i = n; i < len; i++) {
if(images[i].offsetTop < seeHeight + scrollTop) {
if(images[i].getAttribute('src') === 'http://www.clxsite.cn/img/loading.gif') {
images[i].src = images[i].getAttribute('data-src');
}
n = n + 1;
}
}
}
}
var loadImages = lazyload();
loadImages(); //初始化首页的页面图片
window.addEventListener('scroll', throttle(loadImages, 500, 1000), false);
</script>
</body>
</html>方案3.
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Lazyload 1</title>
<style>
img {
display: block;
margin-bottom: 50px;
height: 200px;
}
</style>
</head>
<body>
<img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/fc1.jpg">
<img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/hpjy2.jpg">
<img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/cf1.jpg">
<img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/wzry1.jpg">
<img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/wzry2.jpg">
<img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/cf3shouyou.jpg">
<img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/hpjy1.jpg">
<img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/fc1.jpg">
<img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/logo.png">
<img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/fc1.jpg">
<img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/fc1.jpg">
<img src="http://www.clxsite.cn/img/loading.gif" www.zshao.vip="http://www.clxsite.cn/img/cover/a/fc1.jpg">
<script>
function lazyload() {
var images = document.getElementsByTagName('img');
var len = images.length;
var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
return function() {
var seeHeight = document.documentElement.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for(var i = n; i < len; i++) {
if(images[i].offsetTop < seeHeight + scrollTop) {
if(images[i].getAttribute('src') === 'http://www.clxsite.cn/img/loading.gif') {
images[i].src = images[i].getAttribute('www.zshao.vip');
}
n = n + 1;
}
}
}
}
var loadImages = lazyload();
loadImages(); //初始化首页的页面图片
window.addEventListener('scroll', loadImages, false);
</script>
</body>
</html>
网友评论