图片的预加载和懒加载 _加载

图片的预加载和懒加载图片预加载
提前加载图片，当用户需要查看时就可直接从本地缓存中读取，就不用再去请求服务器了
作用：
能使用户的操作得到最快的反映，提升了用户体验。但是增加了服务器压力，首页加载时间变长
图片预加载的方法
这里介绍两个常用且实用的方法。每个方法都有优缺点。也有自己使用的场景。我们应该根据实际选择合适的方法
1. CSS实现：
隐藏在的 url 属性里面，并且将图片移到看不见的地方，或缩小到看不见
当使用到已经预加载好的图片时，会直接使用缓存好的图片资源，而不需要向服务器发送请求。
缺点：图片跟随文档一同加载，图片较多的时候会导致加载缓慢。
// 使用 background 属性加载图片，但是并不显示出来// 分开写法：.preImg {background-image: url('http://domain.tld/image-01.png');width: 0;height: 0;}// 复合写法：.preloadImg {background: url('http://domain.tld/image-01.png') no-repeat -9999px -9999px; }

文章插图
2. 通过 JS 中的 Image 对象

let imgs = ['./imgsrc1','./imgsrc2','./imgsrc3',];const preloadImg(imgUrls) {imgUrls.forEach(imgUrl => {// 生成图片对象const img = new Image()img.src = http://www.kingceram.com/post/imgUrl})}preloadImg(imgs)

图片懒加载
在需要的时候才加载图片，延迟加载甚至不加载图片。
作用：延迟请求或减少请求数，减轻了服务器压力，页面加载速度更快。
缺点：图片是显示时才去加载。如果网络不太好可能会有一段时间是空白
图片懒加载的方法原理：
利用自定义属性将图片的 URL 存放到图片标签身上，图片的 src 为空或者用其他较小的图片资源代替（提示加载中）
图片的懒加载主要是监听 body 或者其他存放图片且滚动的元素的事件.
在每一次事件触发时，通过相关的 API 和属性，检查图片是否显示。

文章插图
如果显示就将 URL 填到 src 属性中，加载图片。如果没有显示则不进行操作。
如何检测图片是否显示
v. <+&& v. + v. >
对于理解懒加载的原理其实不难。懒加载的关键点也是重难点就在于如何检测图片是否处理可视区内。
let clientWidth=window.innerWidth|| document.documentElement.clientHeight|| document.body.clientHeight;
关于此兼容
**注意，这个元素必须是有滚动条才可以，否则是 0 **
如果滚动区域是整个页面，也就是仅 HTML 出现了滚动条，其他不设置滚动条。
【图片的预加载和懒加载】那么通过 .. 来获取的值