Comment implémenter le chargement paresseux des images en js ? code de méthode js pour implémenter le chargement paresseux des images

Le contenu de cet article explique comment implémenter le chargement différé des images en js ? Le code de la méthode pour implémenter le chargement paresseux des images dans js a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère qu'il vous sera utile.

/*
* 思路：
* 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
        }
    }

}

Recommandations associées :

JS réalise le préchargement des images sans attendre

Chargement paresseux de l'image js (avec défilement) barre coulissante)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!