Javascript asli melaksanakan fungsi penatalan imej dan pemuatan tertunda

Artikel ini terutamanya memperkenalkan penggunaan javascript asli untuk melaksanakan fungsi penatalan imej dan pemuatan tertunda. Idea dan kaedah ini dikongsi dengan semua orang.

Kesan pencapaian: apabila bar skrol ditarik ke bawah, imej tidak akan mula dimuatkan sehingga ia muncul di kawasan yang boleh dilihat

Idea:

(1) teg img, letakkan alamat imej sebenar, Letakkan dalam atribut yang anda tetapkan, seperti lazy-src

(2) Dapatkan ketinggian img dari halaman (offset().atas dalam JQ), yang asli ialah :

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

(3) Tentukan sama ada kedudukan di mana img muncul berada dalam kawasan yang boleh dilihat:

berada di kawasan penyemak imbas yang boleh dilihat, 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);
                    }
                }
            }

Berikut ialah kod terperinci :

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);
            }
        }
    }

Rendering:

Di atas ialah keseluruhan kandungan bab ini Untuk lebih banyak tutorial berkaitan, sila lawati Tutorial Video JavaScript!