图片滚动按需加载

对于图片缓存加载jquery有很多插件可以使用，一行代码就能搞定，可对于移动端并且在dom操作不多的情况下用jquery未免就有点拿大炮打蚊子的赶脚了，所以自己写了个原生的，有写的的不好的和需要优化的地方希望大家不吝赐教。

首先先获取需要缓存加载图片距浏览器顶部的距离，然后把页面上所有的img的实际地址写到alt上去，src全部用一张默认通用图

function getTop(dom){
    var top = dom.offsetTop;
    var parent = dom;
    while(parent = parent.offsetParent){
        top += parent.offsetTop;
    }
    return top;
}

定义变量记录之前滚动到哪了

var oldScrollHeight = -1;

再获取页面上所有的img

var img = document.getElementsByTagName('img');

文档初始化的时候在首屏的图片直接加载

window.onload = function () {
        for(var i=0;i<img.length;i++){
            if(window.innerHeight >= getTop(img[i])){
                img[i].src =  img[i].alt;
                img[i].alt = '';
            }
        }
    };

当滚动到下面后出现在屏幕的图片再加载

window.onscroll = function(){
        if(window.scrollY > oldScrollHeight){
            for(var i=0 ;i<img.length;i++){
                if(img[i].alt && getTop(img[i]) <= (window.innerHeight + window.scrollY)){
                    img[i].src =  img[i].alt;
                    img[i].alt = '';
                }
            }
            oldScrollHeight = window.scrollY;
        }
    };

这样就做到图片按需加载了，对于移动端的流量可以很好的节省并且可以加快页面打开速度

如果你觉得这篇随笔对你有帮助可以支付宝(左)或微信(右)打赏小毅喝杯咖啡 ^_^

转载于:https://www.cnblogs.com/songsony/p/5128335.html