解析懒加载实现原理

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;
            }