[转]jQuery页面滚动图片等成分动态加载达成

本文转自:http://www.zhangxinxu.com/wordpress/?p=1259

一、关于滚动显屏加载

平时会有那规范的页面,内容很丰裕,页面相当长,图片较多。比如说光棍节很疯狂的Tmall商铺页面。
2018正版葡京赌侠诗 1恐怕是前些时间写血本买了个高档动铁耳机的京东市廛页面,只怕是腾讯网微博之类。

那一个页面图片数量多,而且比较大,少说百来K,多则上兆。若是页面载入就一遍性加载完成。乖乖,估算九美国首都改成金针菜了。所以,大家得做点什么,防止那种倒霉的景观爆发。近日很红的做法便是滚动动态加载,显示器幕之外的图样默许是不加载的,随着页面包车型地铁滚动,这一个要呈现图片的区域进入了浏览器不过窗口范围,则触发图片的加载呈现。那种做法的便宜是,1是页面加载速度快(浏览器转啊转的框框或是进度条非常的慢就玩完了),二是节约了流量,因为不恐怕每一个用户浏览页面时初始滚到尾的。

貌似作者上边提到的几个站点就是应用的那种做法,例如,小编以迅雷不如掩耳之势的快慢从天猫商店首页截下来的已接触滚动加载不过未加载落成的图形:
2018正版葡京赌侠诗 2

这是增加前端品质,优化页面加载速度很实用的做法。看上去那种技术某个技艺门槛,其实很简短的。大家须要一个滚动事件,然后剖断成分是或不是在浏览器窗口,然后,突显图片(或是其余因素)就可以啊。作者在jQuery库下写了个落到实处此意义的插件,下边就将轻易显示疏解此插件的使用以及滚动动态加载的兑现。

2、jQuery滚动加载插件scrollLoading

纵然唯有几十行代码,不过为了方便使用,作者可能将其插件化了。插件名字为jquery.scrollLoading.js,您能够狠狠地点击这里下载(右键

[目标|链接]另存为),或是点击这里下载mini压缩版的。

demo
您能够狠狠地方击那里:jQuery滚动加载图片等demo,假如您的网速是在贫困线上挣扎,能够稳步拖动滚动条,就足以很明亮的收看滚动加载的功力了;纵然你的网速让你引感到豪,哥,你需求神速的拖动滚动条工夫瞥见效果。效果类似下边:
2018正版葡京赌侠诗 3

demo页面中如同有段破坏和谐的HTML片段,这是动态加载HTML后的机能,也正是说,此scrollLoading不仅能够用来滚动加载图片,Ajax
load页面什么的也是足以的。

三、scrollLoading使用

2018正版葡京赌侠诗,好歹,首先调用jQuery库文件,还有jquery.scrollLoading.js,您能够一贯在页面包车型客车某处添上如下的代码:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.zhangxinxu.com/study/js/mini/jquery.scrollLoading-min.js"></script>

此插件的主意名便是scrollLoading,所以,直接:包装器.scrollLoading();就足以兑现滚动加载效果了,轻巧的吗。如下:

$(".scrollLoading").scrollLoading();

代表全数class为scrollLoading的要素绑定了滚动加载的办法。
当然,不容许确实就那样简单,我们还需求做点动作的。成分暗中同意是不加载的,那么真正的加载地址鲜明要先行在要素上放置的,例近年来日头条乐乎暗中认可把头像地址绑在了三个自定义的”dynamic-src”属性上,见下图:
2018正版葡京赌侠诗 4

在HTML5中,以data-起头的自定义属性都是官方的,且地址能够是图表,页面等。所以,小编设定了绑定地址的自定义属性为”data-url”,此属性值设为真实的图形(或页面)地址就足以了。例如上边:

<div class="scrollLoading" data-url="loaded.html">加载中...</div>

会在滚动时加载名叫loaded.html的页面,并活动替换里面包车型大巴剧情。

对于常用的图纸,还有少数小意思,正是其暗中同意的src图片地址。其src地址不可能是真性的图样地址(不然会一贯3次性全部加载),也无法是空地址恐怕坏地址,不然IE浏览器下会现身很惊悚的红叉叉。2018正版葡京赌侠诗 5。小编的做法是暗中认可链接的是2个1px
*
一px的gif透明图片(大小相当小),同时能够透出后边加载中gif动画图片,当滚动加载的时候一向把此gif图片替换掉。于是,对于图片,恐怕就有像样上面包车型客车代码:

<img class="scrollLoading" data-url="http://image.zhangxinxu.com/image/study/head/s180/1.jpeg" src="http://www.zhangxinxu.com/study/image/pixel.gif" width="180" height="180" style="background:url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;" />

4、scrollLoading可选参数

scrollLoading是个很简短十分小的插件(无注释YUI compressor
min版仅50八B),所以参数也很少,就一个(已更新),见下表:

参数 默认 释义
attr data-url 获取元素加载地址的属性名

就这个了。此插件只适用于页面默认滚动条的动态加载。对于内部div之类的滚动加载不支持。更新于2012年9月27日:
依照①些同行的须要,现扩展八个可选参数,一个为container意味着容器,另贰个为callback代表回调。具体参见下表:

参数 默认 释义
attr data-url 获取元素加载地址的属性名
container $(window) 滚动的容器。默认为$(window),也就是默认的网页滚动。
callback $.noop 回调。元素动态加载完毕后执行的回调函数。其中回调函数的上下文this就是当前DOM元素。注意:如果无法获取元素加载地址,则不执行动态加载,但是会触发回调。在某些需求下,您可以缺省url值,仅仅触发回调。

特意做了个containercallback参数使用的demo,您能够狠狠地方击那里:普普通通div元素中的动态滚动加载demo

新demo中绑定JavaScript代码如下:

$(".scrollLoading").scrollLoading({
    container: $("#zxxMainCon"),
    callback: function() {
        this.style.border = "3px solid #a0b3d6";    
    }
});

五、周五,结语

要下班了,nice! 前日周末,作者要去钓鱼。 小编胃疼了,鼻涕流个不停,优伤。
空间近年来提高了,20G的月流量已经挺不住了。 方今平常看动漫。
小编说了算在PAJEROSS里面加点广告,评论链接什么的。

//zxx:主人,那是您有屎以来最肮脏的停止语了。

恩,对此小编举双脚表示帮忙。

原创小说,转发请阐明来源张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=1259

(本篇完)

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注