http://6yang.net/myjavascriptlib/preloadImgScroll/
<!DOCTYPE html >
<head>
<title>图片滚动加载</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{border: 0;}
a{
display: inline;
float: left;
margin: 55px;
background: #ccc;
overflow: hidden;
font-size: 0;
}
</style>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
var ImgLazy = function() {
var $winH = $(window).height(); //获取窗口高度
var $img = $("img[lazy='y']"); //获取页面上要延时加载的图片集合
var $imgH = parseInt($img.height() / 2); //图片到一半的时候显示
var $srcDef = "images/loading.gif";
var runing=function() {
$img.each(function(i) {//遍历img
var $src = $(this).attr("original"); //获取当前img URL地址
var $scroTop = $(this).offset(); //获取图片位置
if ($scroTop.top + $imgH >= $(window).scrollTop() && $(window).scrollTop() + $winH >= $scroTop.top + $imgH) {//判断窗口至上往下的位置
if ($(this).attr("src") == $srcDef) {
$(this).hide();
}
$(this).attr("src", function() { return $src }).fadeIn(300); //元素属性交换
}
})
}
runing(); //页面刚载入时判断要显示的图片
$(window).scroll(function() {
runing(); //滚动刷新
})
};
$(function() {
ImgLazy();
});
</script>
</head>
<body>
<div id="show">
<a href="#">
<img src="images/loading.gif" width="160" lazy="y" height="160" original="http://6yang.net/casetp/quality_oly/oly1.jpg"></a>
<a href="#">
<img src="images/loading.gif" width="160" lazy="y" height="160" original="http://6yang.net/casetp/quality_oly/oly2.jpg"></a>
<a href="#">
<img src="images/loading.gif" width="160" lazy="y" height="160" original="http://6yang.net/casetp/quality_oly/oly3.jpg"></a>
<a href="#">
<img src="images/loading.gif" width="160" lazy="y" height="160" original="http://6yang.net/casetp/quality_oly/oly4.jpg"></a>
<a href="#">
<img src="images/loading.gif" width="160" lazy="y" height="160" original="http://6yang.net/casetp/quality_oly/oly5.jpg"></a>
<a href="#">
<img src="images/loading.gif" width="160" lazy="y" height="160" original="http://6yang.net/casetp/quality_oly/oly6.jpg"></a>
<a href="#">
<img src="images/loading.gif" width="160" lazy="y" height="160" original="http://6yang.net/casetp/quality_oly/oly7.jpg"></a>
<a href="#">
<img src="images/loading.gif" width="160" lazy="y" height="160" original="http://6yang.net/casetp/quality_oly/oly8.jpg"></a>
<a href="#">
<img src="images/loading.gif" width="160" lazy="y" height="160" original="http://6yang.net/casetp/quality_oly/oly9.jpg"></a>
<a href="#">
<img src="images/loading.gif" width="160" lazy="y" height="160" original="http://6yang.net/casetp/quality_oly/oly10.jpg"></a>
<a href="#">
<img src="images/loading.gif" width="160" lazy="y" height="160" original="http://6yang.net/casetp/quality_oly/oly11.jpg"></a>
<a href="#">
<img src="images/loading.gif" width="160" lazy="y" height="160" original="http://6yang.net/casetp/quality_oly/oly12.jpg"></a>
<a href="#">
<img src="images/loading.gif" width="160" lazy="y" height="160" original="http://6yang.net/casetp/quality_oly/oly13.jpg"></a>
<a href="#">
<img src="images/loading.gif" width="160" lazy="y" height="160" original="http://6yang.net/casetp/quality_oly/oly14.jpg"></a>
<a href="#">
<img src="images/loading.gif" width="160" lazy="y" height="160" original="http://6yang.net/casetp/quality_oly/oly15.jpg"></a>
<a href="#">
<img src="images/loading.gif" width="160" lazy="y" height="160" original="http://6yang.net/casetp/quality_oly/oly16.jpg"></a>
</div>
</body>
</html>
联系客服
