jquery图片预加载
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>无标题文档</title>
<meta name="author" content="刘">
</head>
<script src="js/jquery-1.7.1.min.js" type="text/javascript" ></script>
<style type="text/css">
div,img{ width:270px; height:129px; border:1px solid #CCCCCC; padding:3px; float:left; margin:20px;}
</style>
<script>
function scanLoad(){//扫描需要加载的div
$.each($("div"),function(i,o){
var windowHeight=$(window).height();
var scrollTop=$(document).scrollTop();
windowHeight=windowHeight/1;//测试当图片出现在窗口上半部分时显示，
if( $(o).offset().top<(scrollTop+windowHeight) && $(o).offset().top > scrollTop )//判断div是不是出在可见的位置
{
var img=$("<img/>").attr("src",$(o).attr("pic")).fadeTo("fast",0);//创建一个可见度为0的图片，地址为div上面的pic属性
$(o).replaceWith(img);//把div替换成这个新创建的图片
img.fadeTo("slow",1);//让它慢慢的显示出来
}
});
}
$(function(){//页面第一次加载时
scanLoad();//扫描需要加载的div
$(document).scroll(scanLoad);//当滚动条滚动时,扫描需要加载的div
$("body").scroll(scanLoad);//加这个为了某些浏览器的兼容
$(window).scroll(scanLoad);//加这个也是为了某些浏览器的兼容
});
</script>
<body>
<!--
下面放了一些div,带了个pic的参数，所以可以判断浏览器打开时不会加载图片的，
当然写法还可以这样
<div>
<img pic="http://www.baidu.com/img/baidu_sylogo1.gif"/>
</div>
注意img的属性不是src了哦，src的话会把图片下载下来的，你可以捕捉滚动条消息，当发现该div在可视范围的时候，把img添加一个src属性（src="http://www.baidu.com/img/baidu_sylogo1.gif"）
-->
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
<div pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
</body>
</html>