懒加载图片的实现及其原理

1. 懒加载的基本

懒加载--也叫延时加载，即在需要的时候才加载（效率低，占用内存小）。所谓懒加载，写的是其get方法：
注意：如果使用懒加载的话则一定要狐疑先判断是否已经有了，如果没有那么再去进行实例化。

2.使用懒加载的好处：

不必将将创建图片的代码全部加载，在有必要的时候再进行加载，占用内存小，减少流量浪费等优点。

3.图片懒加载的思路

• 提前给所有图片设置宽和高用来占位
• 不设置图片的src属性，而是自定义一个data-src属性来存储图片的路径
• 判断当前屏幕的位置（图片的top值和屏幕底部的值），来进行是否显示
  图片，如果需要显示的话，把data-src的值给src

html中的代码

    <ul>
        <li>![](img/home/home2.jpg)</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>