jQuery实现图片的懒加载

一 ，懒加载技术

懒加载（LazyLoad）是前端优化的一种有效方式，极大的提升用户体验，图片一直是页面加载的流浪大户，现在一张图片几兆已经是很正常的事，远远大于代码的大小。

原理：页面加载后只让文档可视区内的图片显示，其它不显示，随着用户对页面的滚动，判断其区域位置，生成img标签，让到可视区的图片加载出来。
.

二， 为什么要懒加载？

懒加载是一种网页性能优化的方式，它能极大的提升用户体验。就比如说图片，图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载出来用户也早就走了。所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源。

总结出来就两个点：

1.全部加载的话会影响用户体验

2.浪费用户的流量，有些用户并不像全部看完，全部加载会耗费大量流量。

三，懒加载的实现原理

由于网页中占用资源较多的一般是图片，所以我们一般实施懒加载都是对图片资源而言的，所以这里的实现原理主要是针对图片。

大家都知道，一张图片就是一个标签，而图片的来源主要是src属性。浏览器是否发起亲求就是根据是否有src属性决定的。

既然这样，那么我们就要对标签的src属性下手了，在没进入可视区域的时候，我们先不给这个标签赋src属性，这样岂不是浏览器就不会发送请求了。

1.代码实现

 	<img id="img" src="./img/loading.gif" img-src="./img/img1.jpg" alt="">
    <img id="img" src="./img/loading.gif" img-src="./img/img2.jpg" alt="">
    <img id="img" src="./img/loading.gif" img-src="./img/1.jpg" alt="">
    <img id="img" src="./img/loading.gif" img-src="./img/2.jpg" alt="">
    <img id="img" src="./img/loading.gif" img-src="./img/3.jpg" alt="">
    <script>



        function lazyLoad() {
			 // 1、 获取 页面 可视区域高度
            var h = window.innerHeight;
              // 2、 获取 滚动 高度
            var y = window.scrollY;
                 // 3、获取所有图片
            // var imgs=document.querySelectorAll("img");
            var imgs = document.querySelectorAll("img");
            for (let i = 0; i < imgs.length; i++) {
                if (h + y > imgs[i].offsetTop) {
                    // console.log("图片"+i+"进入可视区域了")
                    setTimeout(function(){
                    imgs[i].src = imgs[i].getAttribute("img-src");

                    },2000)

                }


            }
        }
        lazyLoad();
        window.onscroll = function () {
            lazyLoad();
        }

2.echo.js方式

<style>
　　.demo img { 
　　　　width: 736px; 
　　　　height: 490px; 
　　　　background: url(images/loading.gif) 50% no-repeat;}
</style>
复制代码
<div class="demo">
    <img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg">
</div>
复制代码
<script src="js/echo.min.js"></script>

<script>

Echo.init({
    offset: 0,//离可视区域多少像素的图片可以被加载
　　 throttle: 0 //图片延时多少毫秒加载
}); 

</script>