Wie implementiert man das verzögerte Laden von Bildern in js? js-Methodencode zum Implementieren des verzögerten Ladens von Bildern

Der Inhalt dieses Artikels befasst sich damit, wie man das verzögerte Laden von Bildern in js implementiert. Der Methodencode zum Implementieren des verzögerten Ladens von Bildern in js hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

/*
* 思路：
* 1.获取可视窗口高（clientHeight）、各个图片的绝对距离（getPub函数）以及滚动进去的高（scrollTop)
* 2.滚动进去的高（scrollTop) + 视窗口高（clientHeight）>=各个图片的绝对距离
* 3.若满足第2步的条件，就让自定义属性的内容 赋值给img的src属性；
* */

/*获取当前元素到html的距离*/
function getPub(obj){
    var a =0;
    var b = 0;
    while (obj){
        a+=obj.offsetLeft;
        b+=obj.offsetTop;
        obj=obj.offsetParent;
    }
    return {'left':a,'top':b};
}
window.onload =window.onscroll= function () {
    var aImage = document.getElementsByTagName('img');
    var cHeight = document.documentElement.clientHeight;
    var sHeight = document.documentElement.scrollTop;

    for (var i = 0;i<aImage.length;i++){
        if(cHeight+sHeight>=getPub(aImage[i]).top){//2
            aImage[i].src=aImage[i].getAttribute('_src');//3
        }
    }

}

Verwandte Empfehlungen:

JS realisiert das Vorladen von Bildern ohne Wartezeit

js-Bild verzögertes Laden (Verschieben mit der Bildlaufleiste). ) )

Das obige ist der detaillierte Inhalt vonWie implementiert man das verzögerte Laden von Bildern in js? js-Methodencode zum Implementieren des verzögerten Ladens von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!