vue中图片预加载&懒加载

简单解释

        懒加载顾名思义，很懒，所以用到时才开始加载，不用不加载。
        预加载，预，提前的意思。没用到时就先加载完等着。

应用范围

        图片的预加载与懒加载主要目的就是减少用户等待的时间，提高用户体验。对于多图页面，比如相册展示。一次性加载过多图片会使用户进入页面速度变慢。这时我们就可以使用懒加载假装自己页面很快。而有些图片不多的页面，我们在用户进入这个页面前需要提前把图片加载完成，来保证其他样式功能正常，这时我们使用预加载提升稳定性。

原理

        懒加载： 初始置src属性为空，或者全部为“加载中”提示图的路径。监听页面滚动，当图片标签即将进入可视区域时给src重新赋值。此时图片开始加载。

        预加载：在进入页面前通过js加载需要的图片到浏览器缓存，浏览器刷新前，同样的图片路径请求会被跳过，直接使用缓存中的文件。

代码详解

        下面主要针对vue做代码详解，也是对上面理论的应用举例。
        懒加载：如下图，红框中是通过的isLoadStart状态控制图片加载时机，当isLoadStart为true时开始加载图片。

图1.vue标签

        如图2，就是控制isLoadStart的方法，通过以下方法我们可以开启图片加载。
        图中 toTop是图片举例页面全内容顶部的距离，clientHeight是可视区域的高度，scrollTop是滚动条与页面内容顶部的距离。因此 toTop - scrollTop就是图片顶部与可视区域顶部的距离。所以当这个距离小于可视区域高度时就说明图片进入可视区域了。本次我设置提前100像素就开始加载。

图2.验证函数

        我们已经有了验证函数，那么我们还需要触发验证。我们可以设置事件监听，或者定时器。
        如图3我设置了滚动条滚动事件的监听，当滚动条滚动期间做验证。如果用定时器需要记得释放。

图3.设置监听

        预加载：之前我使用vux的scroller时发现第一次进入多长图页面无法拖动。后来调查分析是图片加载影响，因为是多长图，只限制宽度，高度自适应。所以未加载出图像时没有高度。因此我需要做个预加载。在页面跳转前，我做了如下操作。遍历目标图片集合，待加载完成onload后再跳转路由。其中count为计算加载到第几张图片。

图4.预加载

转载到其他平台需含本文的链接