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

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

1、关于滚动显屏加载

经常会有这样子的页面，内容很丰富，页面很长，图片较多。好比说光棍节很疯狂的淘宝商城页面。 或者是前段时间写血本买了个高档耳机的京东商城页面，或者是新浪微博之类。

这些页面图片数量多，并且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕。乖乖，估计黄花都变成黄花菜了。因此，咱们得作点什么，避免这种糟糕的情况发生。目前很流行的作法就是滚动动态加载，显示屏幕以外的图片默认是不加载的，随着页面的滚动，这个要显示图片的区域进入了浏览器但是窗口范围，则触发图片的加载显示。这种作法的好处是，一是页面加载速度快（浏览器转啊转的圈圈或是进度条很快就玩完了），二是节约了流量，由于不可能每一个用户浏览页面时从头滚到尾的。

貌似我上面提到的几个站点就是采用的这种作法，例如，我以迅雷不及掩耳的速度从淘宝商城首页截下来的已触发滚动加载可是未加载完毕的图片：

这是提升前端性能，优化页面加载速度很实用的作法。看上去这种技巧有些技术门槛，其实很简单的。咱们须要一个滚动事件，而后判断元素是否在浏览器窗口，而后，显示图片（或是其余元素）就能够啦。我在jQuery库下写了个实现此效果的插件，下面就将简单展现讲解此插件的使用以及滚动动态加载的实现。

2、jQuery滚动加载插件scrollLoading

虽然只有几十行代码，可是为了方便使用，我仍是将其插件化了。插件名为jquery.scrollLoading.js，您能够狠狠地点击这里下载（右键 – [目标|连接]另存为），或是点击这里下载mini压缩版的。

demo 您能够狠狠地点击这里：jQuery滚动加载图片等demo，若是您的网速是在贫困线上挣扎，能够慢慢拖动滚动条，就能够很清楚的看到滚动加载的效果了；若是您的网速让你引觉得豪，哥，你须要很快的拖动滚动条才能瞥见效果。效果相似下面：

demo页面中彷佛有段破坏和谐的HTML片断，那是动态加载HTML后的效果，也就是说，此scrollLoading不只能够用来滚动加载图片，Ajax load页面什么的也是能够的。

3、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”属性上，见下图：

在HTML5中，以data-开头的自定义属性都是合法的，且地址能够是图片，页面等。因此，我设定了绑定地址的自定义属性为”data-url”，此属性值设为真实的图片（或页面）地址就能够了。例以下面：

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

会在滚动时加载名为loaded.html的页面，并自动替换里面的内容。

对于经常使用的图片，还有一点小问题，就是其默认的src图片地址。其src地址不能是真实的图片地址（不然会直接一次性所有加载），也不能是空地址或是坏地址，不然IE浏览器下会出现很惊悚的红叉叉。。个人作法是默认连接的是一个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;" />

4、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值，仅仅触发回调。

特地作了个container和callback参数使用的demo，您能够狠狠地点击这里：普通div元素中的动态滚动加载demo

新demo中绑定JavaScript代码以下：

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

5、周五，结语

要下班了，nice！ 明天周末，我要去钓鱼。 我感冒了，鼻涕流个不停，难受。 空间近日升级了，20G的月流量已经挺不住了。 最近常常看动漫。 我决定在RSS里面加点广告，评论连接什么的。

//zxx:主人，这是你有屎以来最龌龊的结语了。

恩，对此我举双脚表示赞同。

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

（本篇完）