滚屏到相应位置才加载图片的js代码
原理分析：
1）、使用jquery来实现该功能。
2）、为动态加载的<img>增加一个属性（自己创建的）data-url=真正图片路径，而将src=一个只有1像素的透明GIF，style设置一个不停地转圈的等待图片作为背景，class="scl"。
3）、相应的jquery对象是class="scl"的，当屏幕可见时，就将data-url来替换src，实现动态加载。
在用户看来，拉动屏幕到这些图片，会看见它们由一个不停地转动的图片变为真正想看的图片。
1、jquery.scrollLoading.js
* jquery.scrollLoading.js
* by zhangxinxu http://www.jiaochengji.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);
2、页面
<style type="text/css">
.scl{background:url(/img/loading.gif) no-repeat center;}
.wimg{width:300px;height:200px;}
</style>
<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>
<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'>教程集-www.jiaochengji.com，欢迎大家的光临！</a>
<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中有这么一句：
o.load(function() {
o.removeClass("wimg");
});
您可能感兴趣的文章：
使用jquery插件实现图片延迟加载技术详细说明
jquery.lazyload 实现图片延迟加载jquery插件
Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件
滚屏到相应位置才加载图片的js代码
jquery图片延迟加载 前端开发技能必备系列
Lazy Load 延迟加载图片的jQuery插件中文使用文档
基于jquery的跟随屏幕滚动代码
基于jquery的图片懒加载js
Lazy Load 延迟加载图片的 jQuery 插件
jquery 插件实现图片延迟加载效果代码