滚屏到相应位置才加载图片-优化页面访问速度

一个页面图片太多了就有压力。但如果总是分页，每页鸡碎那么多，用户又会很烦。

可以滚屏到相应位置才加载图片，这样就皆大欢喜了。

原理如下：

1、使用jquery

2、需要动态加载的<img>增加一个属性（自己创建的）data-url=真正图片路径，而将src=一个只有1像素的透明GIF，style设置一个不停地转圈的等待图片作为背景，class="scl"

3、相应的jquery对凡是class="scl"的，当屏幕可见时，就将data-url来替换src，这样就可以实现动态加载。在用户这边看来，拉动屏幕到这些图片，会看见它们由一个不停地转动的图片变为真正想看的图片。

代码如下：

jquery.scrollLoading.js

[javascript]
view plaincopyprint?

/*!
* jquery.scrollLoading.js
* by zhangxinxu http://www.zhangxinxu.com
* 2010-11-19 v1.0
* 2012-01-13 v1.1 偏移值计算修改 position → offset

*/
(function($) {
$.fn.scrollLoading = function(options) {

var defaults = {

attr: "data-url"

};
var params = $.extend({}, defaults, options || {});

params.cache = [];
$(this).each(function() {

var node =
this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]);

if (!url) { return; }

//重组

var data = {
obj: $(this),

tag: node,
url: url
};
params.cache.push(data);
});

//动态显示数据
var loading =
function() {
var st = $(window).scrollTop(), sth = st + $(window).height();

$.each(params.cache, function(i, data) {

var o = data.obj, tag = data.tag, url = data.url;

if (o) {

post = o.offset().top; posb = post + o.height();

if ((post > st && post < sth) || (posb > st && posb < sth)) {

//在浏览器窗口内

if (tag ===
"img") {
//图片，改变src

o.load(function() {

o.removeClass("wimg");

});
o.attr("src", url);

} else {

o.load(url);
}
data.obj = null;

}
}
});
return false;

};

//事件触发
//加载完毕即执行
loading();
//滚动执行
$(window).bind("scroll", loading);

};
})(jQuery);

/*!
* jquery.scrollLoading.js
* by zhangxinxu  http://www.zhangxinxu.com * 2010-11-19 v1.0
* 2012-01-13 v1.1 偏移值计算修改 position → offset
*/
(function($) {
$.fn.scrollLoading = function(options) {
var defaults = {
attr: "data-url"
};
var params = $.extend({}, defaults, options || {});
params.cache = [];
$(this).each(function() {
var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]);
if (!url) { return; }
//重组
var data = {
obj: $(this),
tag: node,
url: url
};
params.cache.push(data);
});

//动态显示数据
var loading = function() {
var st = $(window).scrollTop(), sth = st + $(window).height();
$.each(params.cache, function(i, data) {
var o = data.obj, tag = data.tag, url = data.url;
if (o) {
post = o.offset().top; posb = post + o.height();
if ((post > st && post < sth) || (posb > st && posb < sth)) {
//在浏览器窗口内
if (tag === "img") {
//图片，改变src
o.load(function() {
o.removeClass("wimg");
});
o.attr("src", url);
} else {
o.load(url);
}
data.obj = null;
}
}
});
return false;
};

//事件触发
//加载完毕即执行
loading();
//滚动执行
$(window).bind("scroll", loading);
};
})(jQuery);

页面

[html]
view plaincopyprint?

<style
type="text/css">

.scl{background:url(/img/loading.gif) no-repeat center;}
.wimg{width:300px;height:200px;}
</style>

<style type="text/css">
.scl{background:url(/img/loading.gif) no-repeat center;}
.wimg{width:300px;height:200px;}
</style>

[html]
view plaincopyprint?

<script
type="text/javascript"
src="/js/jquery.scrollLoading.js?ver=120308_3"></script>

<script
type='text/javascript'
src='http://cbjs.baidu.com/js/m.js'></script>

<script type="text/javascript" src="/js/jquery.scrollLoading.js?ver=120308_3"></script>

<script type='text/javascript' src='http://cbjs.baidu.com/js/m.js'></script>

[html]
view plaincopyprint?

<a
href='/show.aspx?id=33210947&i=1'
target='_blank'><img
class="scl"
src='/img/pixel.gif'
data-url="Upload/2/PicMiniSize/2012-3-9/201203090246063866.jpg"/></a><br/><a
href='/show.aspx?id=33210947&i=1'
target='_blank'>成熟女人艳如桃……（第一百零五辑）</a>

<a href='/show.aspx?id=33210947&i=1' target='_blank'><img class="scl" src='/img/pixel.gif' data-url="Upload/2/PicMiniSize/2012-3-9/201203090246063866.jpg"/></a><br/><a href='/show.aspx?id=33210947&i=1' target='_blank'>成熟女人艳如桃……（第一百零五辑）</a>

[html]
view plaincopyprint?

<script
type="text/javascript">

$(function() {
$(".scl").scrollLoading();
});
</script>

<script type="text/javascript">
$(function() {
$(".scl").scrollLoading();
});
</script>

这里有一个问题，就是有时真正图片的尺寸不一定能事先知道，所以一般不指定 width 和 height。但这里暂代图片只有1像素，不指定足够大的尺寸，根本看不到不停地转圈等待那个效果；但如果指定了，比如width=300px,height=200px，那真正图片出来后，也只有这么大，并且看起来变形。解决办法是，加载前指定width=300px,height=200px，加载完成后，再将这个指定去掉。

所以我们定义了一个CSS class :.wimg{width:300px;height:200px;}，加载完成后去掉这个wimg。jquery.scrollLoading.js中有这么一句：

[javascript]
view plaincopyprint?

//图片，改变src
o.load(function() {

o.removeClass("wimg");

});

//图片，改变src
o.load(function() {
o.removeClass("wimg");
});

参照文章

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