Le javascript natif implémente des fonctions de défilement d'image et de chargement différé

Cet article présente principalement l'utilisation du javascript natif pour implémenter les fonctions de défilement d'images et de chargement différé. Les idées et les méthodes sont partagées avec tout le monde. J'espère que cela sera utile à tout le monde.

Effet de réussite : lorsque la barre de défilement est abaissée, l'image ne commencera à se charger que lorsqu'elle apparaîtra dans la zone visible

Idée :

(1) balise img, mettez la véritable adresse de l'image, mettez-la dans les propriétés que vous avez définies, telles que lazy-src

(2) Obtenez la hauteur de l'img à partir de la page (offset().top dans JQ), la hauteur native est :

img.getBoundingClientRect().top document.body.scrollTop||document.documentElement.scrollTop

(3) Déterminez si la position où img apparaît est dans la zone visible :

est dans la zone visible du navigateur, justTop>scrollTop&&offsetTop

//保存document在变量里，减少对document的查询
            var doc = document;
            for(var n=0,i = this.oImg.length;n<i;n++){
                //获取图片占位符图片地址
                var hSrc = this.oImg[n].getAttribute(this.sHolder_src);
                if(hSrc){
                    var scrollTop = doc.body.scrollTop||doc.documentElement.scrollTop,
                        windowHeight = doc.documentElement.clientHeight,
                        offsetTop = this.oImg[n].getBoundingClientRect().top + scrollTop,
                        imgHeight = this.oImg[n].clientHeight,
                        justTop = offsetTop + imgHeight;
                    // 判断图片是否在可见区域
                    if(justTop>scrollTop&&offsetTop<(scrollTop+windowHeight)){

                        this.isLoad(hSrc,n);
                    }
                }
            }

Ce qui suit est le code détaillé. :

function LGY_imgScrollLoad(option){
        this.oImg = document.getElementById(option.wrapID).getElementsByTagName('img');
        this.sHolder_src = option.holder_src;
        this.int();
    }
    LGY_imgScrollLoad.prototype = {
        loadImg:function(){
            //保存document在变量里，减少对document的查询
            var doc = document;
            for(var n=0,i = this.oImg.length;n<i;n++){
                //获取图片占位符图片地址
                var hSrc = this.oImg[n].getAttribute(this.sHolder_src);
                if(hSrc){
                    var scrollTop = doc.body.scrollTop||doc.documentElement.scrollTop,
                        windowHeight = doc.documentElement.clientHeight,
                        offsetTop = this.oImg[n].getBoundingClientRect().top + scrollTop,
                        imgHeight = this.oImg[n].clientHeight,
                        justTop = offsetTop + imgHeight;
                    // 判断图片是否在可见区域
                    if(justTop>scrollTop&&offsetTop<(scrollTop+windowHeight)){
                        //alert(offsetTop);
                        this.isLoad(hSrc,n);
                    }
                }

            }
        },
        isLoad:function(src,n){
            var src = src,
                n = n,
                o_img = new Image(),
                _that = this;
            o_img.onload = (function(n){
                _that.oImg[n].setAttribute(&#39;src&#39;,src);
                _that.oImg[n].removeAttribute(_that.sHolder_src);
            })(n);
            o_img.src = src;
        },
        int:function(){
            this.loadImg();
            var _that = this,
                timer = null;
            // 滚动：添加定时器，防止频繁调用loadImg函数
            window.onscroll = function(){
                clearTimeout(timer);
                timer = setTimeout(function(){
                    _that.loadImg();
                },100);
            }
        }
    }

Rendu :

Ce qui précède est l'intégralité du contenu de ce chapitre. Pour plus de didacticiels connexes, veuillez visiter . Tutoriel vidéo JavaScript !