图片延迟加载策略（JavaScript）-白红宇

注：文章最末尾有个人公众号二维码，会分享更多技术文章等，敬请关注

不管是在移动端开发还是在PC端开发，基本都会用到图片的懒加载，这其中最大的原因就是为了保证页面打开的速度（正常情况下3秒之内如果首页打不开，就已经算是死亡时间了）。

延迟加载的的基本做法一般是这样的：

首屏内容中的图片：首先给对应的区域一张默认的图片占着位置（默认图需要非常的小，一般可以维持在5kb以内），当首屏内容都加载完成后（或者也可以给一个延迟的时间），再开始加载真实的图片。

其他屏中的图片：也是给一张默认的图片占位，当滚动条滚动到对应区域的时候，我们再开始加载真实的图片。

扩展：对于数据的异步加载，也是这样的，并不会一次性把页面中所有的数据都请求出来，正常情况是先请求前两屏的数据，后面的数据先不请求，当页面滚动到对应区域的时候，再重新请求数据，接着绑定渲染数据。

一、首屏单张图片延迟加载

html

css

* {
   margin: 0; padding: 0; font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif; font-size: 14px;}img {
   display: block;border: none;}#banner {
   margin: 10px auto; width: 350px; height: 200px; border: 1px solid green; background: url("img/default.gif") no-repeat center center #e1e1e1; }#banner img {
   display: none; width: 100%;height: 100%;}复制代码

在设置样式的时候，把默认的图片设置给img外层的div，作为div的背景，因为要延迟加载，所以一开始给src的属性值是空，这样的话在IE浏览器当中会显示一张碎图，不美观，所以我们让其默认是隐藏的，当真实的图片加载完成后，再显示。

JavaScript

在没有想其他情况的时候，我们可能会很简单的就把JavaScript代码写成以下这样：

var banner = document.getElementById('banner') , imgFir = banner.getElementsByTagName('img')[0];imgFir.src = imgFir.getAttribute('trueImg');imgFir.style.display = 'block';复制代码

但是以上处理是不完整的：如果我们获取的真实图片地址是错误的，当赋值给IMG的src属性的时候，不仅控制台会报错，而且页面中会出现碎图/叉子图，影响视觉效果。所以我们获取图片的地址后，应该先验证地址的有效性，是有效的才赋值，不是有效的是不进行赋值处理的。

var oImg = new Image; // 创建一个临时的img标签oImg.src = imgFir.getAttribute('trueImg');oImg.onload = function () { // 当图片能够正常加载    imgFir.src = this.src;    imgFir.style.display = 'block';    oImg = null;}复制代码

二、超过一屏的单张图片延迟加载

超过一屏的单张图片.png

A：图片容器距离body的上偏移 + 容器的offsetHeight

B：浏览器一屏幕的高度 + 滚动条卷去的高度

所以判断的条件就是：A < B 容器就已经完全的进入了视野，加载真实的图片。

window.onscroll = function () {    if (banner.isLoad) { // 已经加载过了        return;    }    var A = banner.offsetHeight + utils.offset(banner).top;    var B = utils.win('clientHeight') + utils.win('scrollTop');    if (A < B) {        console.log('ok');        // 当条件成立，加载真实的图片，第一次加载完成后，再让页面继续滚动的过程中，A

本例中用到的utils工具类中的offset方法和win方法：

function offset(curEle) {    var disLeft = curEle.offsetLeft, disTop = curEle.offsetTop, par = curEle.offsetParent;    while (par) {        if (navigator.userAgent.indexOf("MSIE 8") === -1) {            disLeft += par.clientLeft;            disTop += par.clientTop;        }        disLeft += par.offsetLeft;        disTop += par.offsetTop;        par = par.offsetParent;    }    return {
   left: disLeft, top: disTop};}function win(attr, value) {    if (typeof value === "undefined") {        return document.documentElement[attr] || document.body[attr];    }    document.documentElement[attr] = value;    document.body[attr] = value;}复制代码

多张图片延迟加载

本例为移动端的情况，有一个列表，超过屏幕好几屏

个人公众号（icemanFE）：分享更多的前端技术和生活感悟

个人公众号