Heim  >  Artikel  >  Web-Frontend  >  Natives Javascript implementiert Funktionen zum Scrollen von Bildern und zum verzögerten Laden

Natives Javascript implementiert Funktionen zum Scrollen von Bildern und zum verzögerten Laden

PHPz
PHPzOriginal
2016-05-16 16:21:011285Durchsuche

In diesem Artikel wird hauptsächlich die Verwendung von nativem Javascript zum Implementieren von Bildlauf- und verzögerten Ladefunktionen vorgestellt. Ich hoffe, dass dies für alle hilfreich ist.

Erfolgseffekt: Wenn die Bildlaufleiste nach unten gezogen wird, wird das Bild erst geladen, wenn es im sichtbaren Bereich erscheint

Idee:

(1) img-Tag, Geben Sie die echte Bildadresse ein. Fügen Sie sie in die von Ihnen festgelegten Eigenschaften ein, z. B. lazy-src

(2) Holen Sie sich die Höhe von img von der Seite (offset().top in JQ), die native :

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

(3) Bestimmen Sie, ob die Position, an der img angezeigt wird, im sichtbaren Bereich liegt:

befindet sich im sichtbaren Bereich des Browsers, 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);
                    }
                }
            }

Das Folgende ist der detaillierte Code :

function LGY_imgScrollLoad(option){
        this.oImg = document.getElementById(option.wrapID).getElementsByTagName(&#39;img&#39;);
        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);
            }
        }
    }

Rendering:

Natives Javascript implementiert Funktionen zum Scrollen von Bildern und zum verzögerten Laden

Der gesamte Inhalt dieses Kapitels finden Sie unter JavaScript-Video-Tutorial!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn