[转]jQuery页面滚动图片等要素动态加载实现

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

相同、关于滚动显屏加载

常常会起应声则的页面,内容好丰富,页面很丰富,图片于多。比如说光棍节很疯狂之淘宝商城页面。
2018正版葡京赌侠诗 1抑或是前段时间写血本买了单高级耳机的京东商城页面,或者是初浪微博之类。

这些页面图片数多,而且比较特别,少说百来K,多则上兆。要是页面载入就一次性加载了。乖乖,估计黄花都改成黄花菜了。所以,我们得做点啊,避免这种糟糕的状况有。目前万分盛行的做法就是滚动态加载,显示屏幕外的图片默认是无加载的,随着页面的轮转,这个只要出示图片的区域进入了浏览器可窗口范围,则触发图片的加载显示。这种做法的功利是,一凡是页面加载速度快(浏览器转啊转的范围或是进度条快速就打了了),二是节了流量,因为不容许每个用户浏览页面时开滚到尾的。

一般我点提到的几乎独站点就是使用的这种做法,例如,我以迅雷不及掩耳之势的快慢由淘宝商城首页截下来的就接触滚动加载但是不加载了的图样:
2018正版葡京赌侠诗 2

当下是提高前端性能,优化页面加载速度好实用的做法。看上去这种技能有些技术门槛,其实很简单的。我们需要一个滚事件,然后判断元素是否当浏览器窗口,然后,显示图片(或是其他因素)就好啦。我在jQuery库下写了只落实这个功能的插件,下面就拿简单展示讲解此插件的运以及滚动动态加载的落实。

仲、jQuery滚动加载插件scrollLoading

尽管只有发生几十推行代码,但是为了方便使用,我或以那个插件化了。插件名也jquery.scrollLoading.js,您得狠狠地点击这里下载(右键

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

demo
您得狠狠地点击这里:jQuery滚动加载图片等demo,如果你的网速是在贫困线上挣扎,可以逐渐拖动滚动条,就得生知的相滚动加载的机能了;如果你的网速为你引以为豪,哥,你需要迅速的拖动滚动条才能够见效果。效果类似下面:
2018正版葡京赌侠诗 3

demo页面中如产生段子破坏和谐的HTML片段,那是动态加载HTML后底功力,也就是说,此scrollLoading不仅可用来滚加载图片,Ajax
load页面什么的也是好的。

三、scrollLoading使用

不顾,首先调用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地址不能够是真正的图片地址(否则会一直一次性全部加载),也不可知是拖欠地址可能坏地址,否则IE浏览器下会面世特别惊悚的红叉叉。2018正版葡京赌侠诗 5。我的做法是默认链接的是一个1px
*
1px的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;" />

季、scrollLoading可选参数

scrollLoading是个坏粗略好粗的插件(无注释YUI compressor
min版仅508B),所以参数也很少,就一个(已更新),见下表:

参数 默认 释义
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之月流量已经大不停止了。 最近时常看动漫。
我控制在RSS里面加点广告,评论链接什么的。

//zxx:主人,这是你来粪便以来最好污秽的尾声了。

好处,对斯我举双脚表示支持。

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

(本篇完)

 

相关文章