图片懒加载
2019-01-14 本文已影响0人
Yin先生
延迟加载、懒加载技术
什么是懒加载技术：
原理：先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。
<!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>
<script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
<style>
.container{
max-width: 800px;
margin:0 auto;
}
.container:after{
content:"";
display: block;
clear:both;
}
.container img{
width:50%;
height:260px;
float:left;
}
</style>
</head>
<body>
<div class="container">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=891209561,3636218284&fm=26&gp=0.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560691440023&di=d39337b7b836e65c16e6dc4601dce19c&imgtype=0&src=http%3A%2F%2Fimg0.ph.126.net%2FVt9-7tQR3vJoxZrei0vvyw%3D%3D%2F6608473901260039263.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1709561480,2949765632&fm=26&gp=0.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=602650883,2101706538&fm=26&gp=0.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560691558709&di=e9ef1a9ed8801863375d6e5f7bab3d83&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Ff00204e4eea23d34e8e413290e5e799b68318395194f6-lRnmz8_fw658">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560691440017&di=bc2eb07d2603907d57387474aaadbee3&imgtype=0&src=http%3A%2F%2Fd-pic-image.yesky.com%2F1080x-%2FuploadImages%2F2019%2F044%2F59%2F1113V6L3Q6TY.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560691648566&di=bf945f77d55ed8ea7b39b082d7efee0e&imgtype=0&src=http%3A%2F%2Fimg8.zol.com.cn%2Fbbs%2Fupload%2F23813%2F23812982.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="https://tp.85814.com/d/file/meinv/2016-12-13/0-Y0lk8wo.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="https://tp.85814.com/d/file/meinv/2016-12-27/0-YIxFMSj.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="https://tp.85814.com/d/file/shutu/2018-01/20150215114222243.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="https://tp.85814.com/d/file/meinv/2017-01-25/0-Y0uYZ5H.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="https://tp.85814.com/d/file/shutu/2018-03/20150910104244591.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="https://tp.85814.com/d/file/shutu/2017-11/p1emvl5rnle.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="https://tp.85814.com/d/file/shutu/2017-10/uq3uesmkzfi.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="https://tp.85814.com/d/file/shutu/2017-10/oh45lrsp1qz.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="https://tp.85814.com/d/file/shutu/2017-10/5cjuqtl1meo.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="https://tp.85814.com/d/file/shutu/2017-09/jbo2bjci0yc.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="https://tp.85814.com/d/file/meinv/2016-12-13/0-HVQrjHD.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="https://tp.85814.com/d/file/meinv/2016-12-13/0-fwZlN04.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="https://tp.85814.com/d/file/meinv/2016-12-12/0-zyfl1Yx.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="https://tp.85814.com/d/file/shutu/2018-04/20150222095129392.jpg">
<img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="https://tp.85814.com/d/file/shutu/2018-04/20150221094023250.jpg">
</div>
<script>
// 一开始没有滚动的时候，出现在视窗中的图片也会加载
start();
// 当页面开始滚动的时候，遍历图片，如果图片出现在视窗中，就加载图片
var clock; //函数节流
$(window).on('scroll',function(){
if(clock){
clearTimeout(clock);
}
clock = setTimeout(function(){
start()
},200)
})
function start(){
$('.container img').not('[data-isLoading]').each(function () {
if (isShow($(this))) {
loadImg($(this));
}
})
}
// 判断图片是否出现在视窗的函数
function isShow($node){
return $node.offset().top <= $(window).height()+$(window).scrollTop();
}
// 加载图片的函数，就是把自定义属性data-src 存储的真正的图片地址，赋值给src
function loadImg($img){
$img.attr('src', $img.attr('data-src'));
// 已经加载的图片，我给它设置一个属性，值为1，作为标识
// 弄这个的初衷是因为，每次滚动的时候，所有的图片都会遍历一遍，这样有点浪费，所以做个标识，滚动的时候只遍历哪些还没有加载的图片
$img.attr('data-isLoading',1);
}
</script>
</body>
</html>
复制整体代码在浏览器中可直接看效果，一定有你意想不到的惊喜。
