学习原生JS延时加载

优化网站速度时接触到延时加载这个概念,本文以图片延时加载为例作学习总结。

延时加载概念和原理

正常网页页面结构:头部CSS样式和少量JS;中间部分是内容,包括图片、视频、文本等;底部主要JS文件。浏览器打开网页时这些资源按顺序从前到后逐一加载。而大多页面都无法一屏显示完全,如果初次打开页面时让浏览器只加载可视区域的图片,不加载当前不可见图片,就可以把下载看不见图片的时间用来下载页面后面的js等内容,大大提高页面访问速度。当鼠标像下滚动浏览器时,再按需加载出现在可视区的图片。

图片延时加载的实现

<img src="/loading.gif" data-src="/images/001.png"> 初始状态下让图片的默认src为空或者指向一个小尺寸图片,设置data-src属性存储图片真实路径。需要显示图片时用data-src属性值替换掉默认的src值。下图详解了如何判断何时加载图片。 图片延时加载原理图 1. 浏览器可视区域高度H,通常是固定的(这里不考虑手动调整窗口大小)window.innerHeight可取得此值。
2. 图片距离页面顶端的距离T,也是固定值可用offsetTop方法计算。
3. 浏览器滚动条滚过高度S,这是唯一变化的值document.documentElement.scrollTop||document.body.scrollTop计算。

当 H + S > T 时该图片出现在可视区域。

原生JS图片延时加载

var imgs = document.body.querySelectorAll('img'),    //获取所有图片  
    H = window.innerHeight;     //浏览器高度
window.onload = window.onscroll = function(){  
    var S = document.documentElement.scrollTop||document.body.scrollTop;   //滚动条滚过高度
    [].forEach.call(imgs,function(img){
         if(!img.getAttribute('data-src')){return}
         if(H + S + 200 > getTop(img)){
// getTop(img)获取图片距离页面顶部高度,H+S+200让图片提前加载。
             img.src=img.getAttribute("data-src");
             img.removeAttribute("data-src");
         }
        })
}

function getTop(e){     //获取元素距离顶部高度方法。  
    var T = e.offsetTop;
    while(e = e.offsetParent ){
        T += e.offsetTop
}
    return T
}

原生示例

图片延迟加载