什么是预加载、懒加载

image.png

懒加载

图片先用占位符表示，不要将图片地址放到src属性中，而是放到其它属性(data-original)中
页面加载完成后，监听窗口滚动，当图片出现在视窗中时再给它赋予真实的图片地址，也就是将data-original中的属性拿出来放到src属性中
在滚动页面的过程中，通过给scroll事件绑定lazyload函数，不断的加载出需要的图片

注意：请对lazyload函数使用防抖与节流，不懂这两的可以自己去查

懒加载方式

1. 纯粹的延迟加载，使用setTimeOut或setInterval
   这种方式，本质上不算懒加载
   加载完首屏内容后，隔一段时间，去加载全部内容
   但这个时间差已经完成了用户对首屏加载速度的期待

2. 条件加载
   用户点击或者执行其他操作再加载
   其实也包括的滚动可视区域，但大部分情况下，大家说的懒加载都是只可视区域的图片懒加载，所以就拿出来说了

3.可视区加载
这里也分为两种情况
1、页面滚动的时候计算图片的位置与滚动的位置
2、通过新的API： IntersectionObserver API（可以自动"观察"元素是否可见）

实现懒加载

<img class="lazy" src="[占位图]" data-src="[真实url地址]" data-srcset="[不同屏幕密度下，不同的url地址]" alt="I'm an image!">

如上，data-属于自定义属性， ele.dataset. 可以读取自定义属性集合
img.srcset 属性用于设置不同屏幕密度下，image自动加载不同的图片，比如<img src="image-128.png" srcset="image-256.png 2x" />

预加载

预加载
提前加载图片，当用户需要查看时可直接从本地缓存中渲染

加载方式目前主要有两种

1. CSS预加载
   先通过CSS将图片加载到不可见区域

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }

待到满足触发条件后，再通过JS渲染

2. JS预加载
   通过new Image()把图片下载到本地，让浏览器缓存起来，设置其src来实现加载，再使用onload方法回调加载完成事件

<div class="hidden">  
    <script type="text/javascript">  
        <!--//--><![CDATA[//><!--  
            var images = new Array()  
            function preload() {  
                for (i = 0; i < preload.arguments.length; i++) {  
                    images[i] = new Image()  
                    images[i].src = preload.arguments[i]  
                }  
            }  
            preload(
                "http://qiniu.cllgeek.com/react02.png",
                "http://qiniu.cllgeek.com/react03.png",
                "http://qiniu.cllgeek.com/react04.png"
            ) 
        //--><!]]>  
    </script>  
</div>