• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

JS延迟加载

154 0

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

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

0
  • 本文分类:JavaScript
  • 本文标签:延迟加载
  • 流行热度:已超过 154 人围观了本文
  • 最后更新:2019年02月23日 - 18时11分17秒
  • 发布日期:2019年02月23日 - 17时54分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
微信收款码
微信收款码