图片滚动懒加载

作者: Jackandjohn | 来源:发表于2017-06-11 11:36 被阅读57次

MonkeyEye（电影售票系统）项目地址：https://github.com/SYSUMonkeyEye/MonkeyEye-FE

为什么要实现图片懒加载呢？

首先，来看一下应用的首页（左一）：

其中下方是无限加载的列表，想象一下，假如列表中的所有图片一次性加载，将会是什么情况？展示图片的地方将会一片空白，用户体验差，同时由于浏览器并发连接数量的限制，不是所有的图片都能第一时间加载。

由于用户打开网页的时候，只会关心可视界面内的图片，因此其他图片可暂时用同一张图片代替，等页面滚动的过程中，图片进入至可视界面时，再向服务器发出资源请求。这样既可以快速加载图片，带来良好的用户提样，同时由于不可见的图片不会第一时间加载，能够节省许多流量。

这里就不展示代码，具体谈谈实现的步骤：

在<img>标签中插入指令，当监测到指令插入标签时，我们判断这张图片是否需要懒加载。有两种情况，一是图片还没有到达可视区域，二是图片已经加载。
当页面加载时，监听图片列表的scroll事件，判断哪些图片可以进行懒加载。这里要注意的是，相同的图片加载一次后，再次出现时可以直接从浏览器缓存中取出，不用再向服务器发送请求。
当页面即将销毁时，要释放页面引用的资源，将当前页面的所有事件监听器销毁。