- 懒加载的基本
懒加载--也叫延时加载，即在需要的时候才加载（效率低，占用内存小）。所谓懒加载，写的是其get方法：
注意：如果使用懒加载的话则一定要狐疑先判断是否已经有了，如果没有那么再去进行实例化。
2.使用懒加载的好处：
不必将将创建图片的代码全部加载，在有必要的时候再进行加载，占用内存小，减少流量浪费等优点。
3.图片懒加载的思路
- 提前给所有图片设置宽和高用来占位
- 不设置图片的src属性，而是自定义一个data-src属性来存储图片的路径
- 判断当前屏幕的位置（图片的top值和屏幕底部的值），来进行是否显示
图片，如果需要显示的话，把data-src的值给src
html中的代码
<ul>
<li></li>
。。。
。。。
。。。
</ul>
js中的代码
//首先获取所有图片
var imgs = document.querySelectorAll("img");
//设置滚动事件
window.onscroll = lazyloadFn;
//屏幕的高度
var sh = window.innerHeight;
//图片懒加载的方法
function lazyloadFn () {
//获取滚动的距离
var st = document.body.scrollTop;
//计算滚动中的底部的值
var sn = sh + st;
console.log(sn);
for (var i = 0; i < imgs.length; i++) {
if (imgs[i].offsetTop <= sn) {
imgs[i].src = imgs[i].getAttribute("data-src");
}
}
}
接下来是jQuery中的懒加载
1.首先我们需要导入两个文件
<script src="lib/jquery.js"></script>
<script src="lib/jquery.lazyload.min.js"></script>
2.html与上面的一样
3.下面是js代码
<script type="text/javascript">
//利用jquery，图片设置data-original属性
$("img").lazyload({
effect : "fadeIn"
});
</script>
