编写代码实现图片的懒加载
1 前端性能优化的重要方案，通过图片或者数据的延迟加载，我们可以加快页面的渲染的速度，让我们第一次打开页面的速度变快
2 只有滑动到某个区域，我们才加载真实的图片，这样也可以节省加载的流量
如何实现图片懒加载
把所有需要延迟加载的图片用一个盒子包起来，设置宽高和默认的占位图，
开始让所有的img的src为空，把真实图片的地址放到img的自定义属性上，让img隐藏
等待所有其他资源都加载完之后，我们再开始加载图片
等于很多图片，需要当页面滚动的时候，当前图片区域完全显示出来后在加载真实图片
单张图片的延迟加载， 当图片进入显示区在加载
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .imgBox{ margin: 1000px auto; width: 300px; height: 100px; overflow: hidden; background-color: #bbb; } .imgBox img{ display: none; /* 图片一开始是隐藏的*/ width: 100%; } </style> </head> <body> <div class="imgBox"> <img src="" alt="" data-img="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" > </div> <script src="/jquery-3.2.1.js"></script> <script src="/01.js"></script> </body> </html>
js文件
let $imgBox = $('.imgBox'),
$img = $imgBox.children('img');
// jq中的事件绑定支持多事件绑定：window.onload & window.onscroll 两个事件触发的时候执行相同的事情
// load当页面中所有资源都加载完成之后触发，scroll浏览器滚动触发
// $imgBox.outerHeight() 表示 获取$imgBox元素的高度 （当前元素的高度）
// $imgBox.offset() 表示 获取$imgBox元素顶部距离body页面顶部/左边的距离
// $(window).outerHeight()表示浏览器的高度
// $A 图片底边到页面顶部的距离 = 图片的高度 + 图片顶边到页面顶边的距离
// $B 浏览器底边到页面顶边的距离 = 浏览器的可视区一屏幕的高度 + 滚动条卷去的高度
$(window).on('load scroll',function(){
if($img.attr('isLoad')==='true'){
return; // 如果加载过就不会再加载
}
// 图片的高度 + 图片顶边到页面顶边的距离
let $A = $imgBox.outerHeight() + $imgBox.offset().top
// 浏览器的高度（一屏幕高） + 滚动条卷去的高度
let $B = $(window).outerHeight() + $(window).scrollTop();
if( $A <= $B){ // 如果 图片底边到页面顶部的距离 <= 浏览器底边到页面顶边的距离就加载真实图片
// 加载真实图片
$img.attr('src',$img.attr('data-img'));//获取自定义属性的值，赋值给src
$img.on('load',function(){
//当图片加载成功后，再在页面上显示图片
// $img.css('display','block')
$img.stop().fadeIn(); // 使图片渐变出来
});
$img.attr('isLoad',true) // attr储存自定义属性值都是字符串格式'true'
}
})
如何实现 多张图片的延迟加载
html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .imgBox{ margin-bottom: 20px; height: 160px; overflow: hidden; background-color: #bbb; } .imgBox img{ display: none; /* 图片一开始是隐藏的*/ width: 100%; } .container{ width: 800px; margin: 0 auto; } </style> </head> <body> <div class="container"> <!-- <div class="imgBox"> <img src="" alt="" data-img="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" > </div> --> </div> <script src="/jquery-3.2.1.js"></script> <script src="/01.js"></script> </body> </html>
js文件
let $container = $('.container')
$imgBoxs = null;
// 制造假数据
let str = ``;
// 创造一个长度为20的数组，每一项都用null填充
new Array(20).fill(null).forEach((item,index)=>{//其实就是个for循环
str += `
<div class="imgBox">
<img src="" alt="" data-img="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" >
</div>
`
})
$container.html(str)
$imgBoxs = $container.children('.imgBox');
// 多张图片延迟加载
$(window).on('load scroll',function(){
//获取浏览器底边框到body页顶边的距离
let $B = $(window).outerHeight() + $(window).scrollTop(); // 浏览器的可视区一屏幕的高度 + 滚动条卷去的高度
//循环每一张图片区域，根据当前图片到body页顶边的距离，计算出里面的图片是否加载
$imgBoxs.each((index,item)=>{
let $item = $(item);
$itemA = $item.outerHeight() + $item.offset().top // 图片的高度 + 图片顶边到页面顶边的距离
isLoad = $item.attr('isLoad')
if( $B >= $itemA && isLoad !== 'true'){//如果 浏览器底边到页面顶端的距离 >= 图片底边到页面顶端的距离
$item.attr('isLoad',true)
//加载当前区域中的图片
let $img = $item.children('img') //获得每张图片
$img.attr('src',$img.attr('data-img'));//获取自定义属性的值，赋值给src
$img.on('load',()=>{
//当图片加载成功后，再在页面上显示图片
// $img.css('display','block')
$img.stop().fadeIn(); // 使图片渐变出来
});
}
})
})