0. 前言
在我们闲暇无事的时候，总是看看这个、那个的网站，比如京东、天猫、淘宝什么的，当我们再看的时候会出现照片闪了一下的情况，这是正常的，因为图片刚刚加载出来，这个也就是懒加载，如果你在打开网页的时候，一下把图片都请求出来，你可能没看几秒就退出了，一是浪费了你的流量，二是用户体验差，一进入这个网站会浪费很多流量，所以会造成遗失大量的用户。
20150916124515_SiWeR.jpeg
1. 简介
懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。
百度百科
2. 代码实现
2.1 CSS样式
下面这句话是你在写移动端的时候写的
<meta name="viewport" content="width=device-width,initial-
scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
img{
width: 100%;
height: 640px;
}
2.2 HTML结构
实现懒加载的图片多一点
<ul>
<li><img data-src="1.jpg" alt="" /></li>
<li><img data-src="2.jpg" alt="" /></li>
<li><img data-src="3.jpg" alt="" /></li>
<li><img data-src="4.jpg" alt="" /></li>
<li><img data-src="5.jpg" alt="" /></li>
<li><img data-src="1.jpg" alt="" /></li>
<li><img data-src="2.jpg" alt="" /></li>
<li><img data-src="3.jpg" alt="" /></li>
<li><img data-src="4.jpg" alt="" /></li>
<li><img data-src="5.jpg" alt="" /></li>
<li><img data-src="1.jpg" alt="" /></li>
<li><img data-src="2.jpg" alt="" /></li>
<li><img data-src="3.jpg" alt="" /></li>
<li><img data-src="4.jpg" alt="" /></li>
<li><img data-src="5.jpg" alt="" /></li>
<li><img data-src="1.jpg" alt="" /></li>
<li><img data-src="2.jpg" alt="" /></li>
<li><img data-src="3.jpg" alt="" /></li>
<li><img data-src="4.jpg" alt="" /></li>
<li><img data-src="5.jpg" alt="" /></li>
<li><img data-src="1.jpg" alt="" /></li>
<li><img data-src="2.jpg" alt="" /></li>
<li><img data-src="3.jpg" alt="" /></li>
<li><img data-src="4.jpg" alt="" /></li>
<li><img data-src="5.jpg" alt="" /></li>
<li><img data-src="1.jpg" alt="" /></li>
<li><img data-src="2.jpg" alt="" /></li>
<li><img data-src="3.jpg" alt="" /></li>
<li><img data-src="4.jpg" alt="" /></li>
<li><img data-src="5.jpg" alt="" /></li>
</ul>
实现懒加载思路
- 提前给所有的图片设置宽和高来占位
- 不设置图片的src属性，而是自定义一个data-src属性来储存图片的路径
- 判断当前屏幕的位置（图片的top值和屏幕底部的值），来进行是否显示图片，如果需要显示的话，把data-src的值给src。
2.3 JS代码
var imgs = document.querySelectorAll("img");
//设置滚动事件
window.onscroll = lazyloadFn;
//屏幕的高度
var sh = window.innerHeight;
//刚进来需要调用一下
lazyloadFn();
//图片懒加载的方法
function lazyloadFn() {
//获取滚动的距离
var st = document.body.scrollTop;
//计算滚动中的底部的值
var sn = sh + st;
for(var i = 0; i < imgs.length; i++){
if (imgs[i].offsetTop <= sn) {
imgs[i].src = imgs[i].getAttribute("data-src");
}
}
}
2.4 效果
GIF.gif
你是不是要问我怎么没有闪一下的效果呢？别着急啊，在下面给你实现
2.5 闪一下的效果
在CSS中添加几行代码，以下样式是为了做渐变效果，在你写项目的时候不要乱用！！！
img{
width: 100%;
height: 640px;
opacity: 0;
transition: opacity 2s;
}
img[src]{
opacity: 1;
}
GIF.gif
是不是有闪一下的效果。。。。。。
2.6 以后真正写的代码
// 利用jquery懒加载插件的话，图片设置data-original属性来存储图片路径
$("img").lazyload({
effect : "fadeIn"
});
3. 结束语
写的这个懒加载其实你也会用，引入插件，就一行代码就哦了，只是想说懒加载的原理是怎么实现的，希望对你有所帮助，点赞，分享！！！
