图片懒加载..就是当加载页面的时候，只加载可视区域的图片，这样可以帮助网站节约大量的流量资源，提高页面加载速度。
思路：1、首先给img标签自定义一个data-src属性，用来存放图片的地址
2、当图片滚动到可视区域内，把自定义的data-src属性的值赋值给img标签的src属性
html结构如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片懒加载..</title> <link rel="stylesheet" href="css/style.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <div class="container"> <div class="box"> <ul class="Jul clearfix"> <li class="left"><a href=""><img data-src="images/1.jpg" src="" alt="图片加载中..."></a></li> <li><a href=""><img data-src="images/2.jpg" src="" alt="图片加载中..."></a></li> <li><a href=""><img data-src="images/3.jpg" src="" alt="图片加载中..."></a></li> <li><a href=""><img data-src="images/4.jpg" src="" alt="图片加载中..."></a></li> <li class="left"><a href=""><img data-src="images/5.jpg" src="" alt="图片加载中..."></a></li> <li><a href=""><img data-src="images/6.jpg" src="" alt="图片加载中..."></a></li> <li><a href=""><img data-src="images/7.jpg" src="" alt="图片加载中..."></a></li> <li><a href=""><img data-src="images/8.jpg" src="" alt="图片加载中..."></a></li> <li class="left"><a href=""><img data-src="images/9.jpg" src="" alt="图片加载中..."></a></li> <li><a href=""><img data-src="images/10.jpg" src="" alt="图片加载中..."></a></li> <li><a href=""><img data-src="images/11.jpg" src="" alt="图片加载中..."></a></li> <li><a href=""><img data-src="images/12.jpg" src="" alt="图片加载中..."></a></li> <li class="left"><a href=""><img data-src="images/13.jpg" src="" alt="图片加载中..."></a></li> <li><a href=""><img data-src="images/14.jpg" src="" alt="图片加载中..."></a></li> <li><a href=""><img data-src="images/15.jpg" src="" alt="图片加载中..."></a></li> <li><a href=""><img data-src="images/16.jpg" src="" alt="图片加载中..."></a></li> <li class="left"><a href=""><img data-src="images/17.jpg" src="" alt="图片加载中..."></a></li> <li><a href=""><img data-src="images/18.jpg" src="" alt="图片加载中..."></a></li> <li><a href=""><img data-src="images/19.jpg" src="" alt="图片加载中..."></a></li> <li><a href=""><img data-src="images/20.jpg" src="" alt="图片加载中..."></a></li> </ul> </div> </div> <script src="js/main.js"></script> </body> </html>
css样式如下
html,body,div,ul,li,a,img{
margin:0;
padding:0;
}
a{
text-decoration:none;
}
li{
list-style:none;
}
.clearfix:before,
.clearfix:after{
content:'';
display:table;
clear:both;
}
.container{
width:980px;
margin-left:auto;
margin-right:auto;
background:#ccc;
}
.box{
padding:0 20px;
margin-top:600px;
}
.Jul li{
float:left;
margin:20px 0 0 20px;
background:#fff;
}
.Jul li.left{
margin-left:0;
}
.Jul li a{
display:block;
width:220px;
height:220px;
text-align:center;
line-height:220px;
color:#000;
}
.Jul li a img{
width:220px;
height:220px;
}
js代码如下
$(function(){
var Img=$('.box img');
lazyRender(Img);
var timer;
$(window).on('scroll',function() {
if(timer) {
clearTimeout(timer)
}
timer = setTimeout(function(){//延时加载
console.log('1')
lazyRender(Img);
},30)
})
//判断当前的img是否出现在了视野中
function checkShow($img) {
var scrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
var offsetTop = $img.offset().top;
//判断是否出现在视野中的两种情况:
//一、目标图片的顶部是否小于滚动距离+浏览器窗口的高度，如果小于，证明没有加载过
//二、目标图片顶部距离大于滚动距离，就加载..
if(offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) {
return true;
}
return false;
}
function isLoaded($img) {//判断是否已经加载过..
return $img.attr('data-src') === $img.attr('src');
}
function loadImg($img) {//把自定义属性的值赋值给图片的src
$img.attr('src',$img.attr('data-src'));
}
function lazyRender($img) {
$img.each(function () {
if (checkShow($(this)) && !isLoaded($(this)) ){
loadImg($(this));
}
})
}
})
打开开发者工具的network查看图片加载情况
当没有出现在可视区域时：
出现在可视区域时：
实现的效果
下面是鸡汤时刻：
来，大声喊出来：梦想是要有的，万一实现了呢！！！！