0%

JS延迟加载

发布于 / 分类: JavaScript / 暂无评论 / 阅读量 379

最后更新于 2019年02月23日

JS延迟加载

我们做一个对图片的延迟加载,需要准备:一张通用的默认图片,还有几张正常使用的图片。

表现形式:

当浏览器没有滚动到可以显示这个图片的高度时,默认使用默认图片,这个图片一般几kb的大小,当浏览器滑动到可以显示图片的高度时,开始加载对应的图片,由透明到不透明做一个过渡,这个也是京东商城使用的一个效果。

所有图片都有一个通用的class名称:.wait_load 用一个id为:#photo的div容器包裹。

图片元素src默认使用默认的图片加载,并且会有一个自定义的属性,这个属性自定义名称,这里使用xsrc,其属性值要是正确的图片链接地址!

<img xsrc="images/p1.jpg"  src="images/ph_login1.jpg" alt="" class="wait_load" />

首先我们获取到所有图片元素的集合:

var img_elements = $('#photo .wait_load');

然后设置滚动事件,触发显示图片的效果。

$(window).bind('scroll',function(){
    setTimeout(function(){
        for(var i = 0;i<img_elements.length();i++){
            var _this = img_elements.getElemet(i);
            if(getInner().height + getScroll().height >= offsetTop(_this)) {
                $(_this).attr('src',$(_this).attr('xsrc'));
            }
        }
    },100)
})

当浏览器滚动,触发延迟加载setTimeout,然后for循环所有图片元素,判断当前的高度是否大于或者等于图片距离顶部高度,如果大于或者等于,那么这个图片的src将改为xsrc中的正确图片链接。

此时延迟加载基本完成,但是还没有过渡效果,于是我们要再添加一个透明度

//在触发之前将所有的图片透明度改为0;
$('#photo .wait_load').opacity(0);

$(window).bind('scroll',function(){
    setTimeout(function(){
        for(var i = 0;i<img_elements.length();i++){
            var _this = img_elements.getElemet(i);
            if(getInner().height + getScroll().height >= offsetTop(_this)) {
                $(_this).attr('src',$(_this).attr('xsrc')).animation({
                'attr' : 'o',
                'end' : 100
                });
            }
        }
    },100)
})

所有图片透明度为0后,调用动画效果,将透明度改为正常值。

考虑到当浏览器大小发生变化是,可是区域大小也会发生变化,所以也要为窗口大小做一个事件触发,但是触发的代码都是一样的,只是事件不同,这里就可以做一个节省代码的操作。

//在触发之前将所有的图片透明度改为0;
$('#photo .wait_load').opacity(0);

//触发事件
$(window).bind('scroll',_wait_load);
$(window).bind('resize',_wait_load);

//共用代码
function _wait_load() {
   setTimeout(function(){
        for(var i = 0;i<img_elements.length();i++){
            var _this = img_elements.getElemet(i);
            if(getInner().height + getScroll().height >= offsetTop(_this)) {
                $(_this).attr('src',$(_this).attr('xsrc')).animation({
                'attr' : 'o',
                'end' : 100
                });
            }
        }
    },100)
};

上面用的一些关联代码:

//获取元素到最外层顶点的距离
function offsetTop(element) {
    var top = element.offsetTop;
    var parent = element.offsetParent;
    while(parent != null) {
        top += parent.offsetTop;
         parent = parent.offsetParent;
    }
    return top;
}


//跨浏览器获取可视宽度 
function getInner() {
    if(typeof innerWidth != 'undefined') {
        return {
            width : window.innerWidth,
            height : window.innerHeight
        }
    }else {
        return {
            width : document.documentElement.clientWidth,
            height : document.documentElement.clientHeight
        }
    }
}

//跨浏览器获取scroll大小
function getScroll() {
    return {
        width : document.body.scrollLeft != 0 ? document.body.scrollLeft : document.documentElement.scrollLeft,
        height : document.body.scrollTop != 0 ? document.body.scrollTop : document.documentElement.scrollTop
    }
};


//获取某一节点的属性
Base.prototype.attr = function(attr,value) {
    for(var i = 0;i<this.arr.length;i++){
        if(arguments.length == 1) {
            return this.arr[i].getAttribute(attr);
        }else if(arguments.length == 2) {
            this.arr[i].setAttribute(attr,value);
        }
    }
    return this;
}

以上完成,这里放一下效果图:

解决 vultr vps被谷歌学术识别为机器人的方法 JS 预加载1
  • 滑动验证
    »
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao