$(function () {
ImgEve()
$(window).scroll( function(){
ImgEve()
});
})/*图片延时加载*/
function ImgEve(){
$("#imgload li img").each( function(){
//获取当前窗口高度
var f_height = $(window).height()
//获取当前li的绝对高度
var slitop = $(this).parent().offset().top;
//获取当前滚动条的移动距离
var scrtop = $(window).scrollTop();
//判断如果用li的绝对高度减去当前滚动条的移动距离小于当前窗口高度,就加载当前图片然后显示
if( slitop - scrtop < f_height ){
//$(this).load( function(){
$(this).fadeTo(400,1,function(){
$(this).parent().removeClass("loading")
})
//})
}
})}
上面的代码可以正常显示,但把异步加载的代码还原时,当拖动滚动条时下面的图片就显示不出来 请指教谢谢把这里还原if( slitop - scrtop < f_height ){
$(this).load( function(){
$(this).fadeTo(400,1,function(){
$(this).parent().removeClass("loading")
})
})
}
load 里面的this指向不对了~~~
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
body{ font-size:12px; background:#fff; font-family:"宋体","Arial Narrow"}
body, ul, li, h1, h2, h3, h4, h5, h6, p, th, td, dl, dt, dd{ margin:0; padding:0}
ul, li{ list-style-type:none}
img{ border:none; vertical-align:bottom}.main{ width:960px; margin:auto}.photo{ margin-top:50px}
.photo li, .photo li img{ width:280px; height:210px; float:left}
.photo li{ margin:0 40px 40px 0}
.photo li img{ display:none}
.photo .loading{ background:url(../images/loading.gif) no-repeat 133px 100px}.prev{ width:100px; height:100px; position:fixed; top:30px; left:30px; z-index:999}
</style>
<script src="Js/jquery-1.6.2.js" type="text/javascript"></script><script type="text/javascript">
$(function () {
ImgEve()
$(window).scroll( function(){
var scrtop = $(window).scrollTop();
var slitop = $("#imgload li:eq(9)").offset().top;
var f_height = $(window).height()
$(".prev").html("滚动条:"+scrtop +"<br />第10张图片:"+slitop +"<br />窗口宽度:"+f_height+"<br />差值:"+(slitop-scrtop))
ImgEve()
})
})/*图片延时加载*/
function ImgEve(){
$("#imgload li img").each( function(){
//获取当前窗口高度
var f_height = $(window).height()
//获取当前li的绝对高度
var slitop = $(this).parent().offset().top;
//获取当前滚动条的移动距离
var scrtop = $(window).scrollTop();
//判断如果用li的绝对高度减去当前滚动条的移动距离小于当前窗口高度,就加载当前图片然后显示
if( slitop - scrtop < f_height ){
//$(this).load( function(){
$(this).fadeTo(400,1,function(){
$(this).parent().removeClass("loading")
})
//})
}
})
}
</script>
</head>
<body><div class="main">
<div class="prev"></div>
<ul id="imgload" class="photo">
<li class="loading"><img src="http://globpt.com/wp-content/uploads/2009/01/windows-7-aurora-green-wallpaper.jpg" /></li>
<li class="loading"><img src="http://fc07.deviantart.com/fs25/i/2008/139/d/4/Windows_7_by_rehsup.jpg" /></li>
<li class="loading"><img src="http://www.pronetworks.org/v21/images/gallery/windows7_wallpaper/Windows7_7048_GB_6_medium.jpg" /></li>
<li class="loading"><img src="http://www.nowetapety.pl/screen/Windows-7b.jpg" /></li>
<li class="loading"><img src="http://www.wallpapersgo.com/wp-content/uploads/2010/02/Windows-7-Style.jpg" /></li>
<li class="loading"><img src="http://adi84.files.wordpress.com/2010/04/windows_7_logo_blue.jpg" /></li>
<li class="loading"><img src="http://thuvienbao.com/anhdep/wp-content/original/2009_12/Unofficial-Windows-7-Wallpapers-69.jpg" /></li>
<li class="loading"><img src="http://wallpapersfor.net/wallpapers/windows-7-1280x800.jpg" /></li>
<li class="loading"><img src="http://h2odeskmod.files.wordpress.com/2009/07/windows-7-red.jpg" /></li>
<li class="loading"><img src="http://www.liciouscity.com/wp-content/uploads/2011/05/Blue_Lights_HD_windows_7_wallpaper.jpg" /></li>
<li class="loading"><img src="http://www.wallpaperweb.org/wallpaper/computer/1920x1080/Windows_7_ultimate_collection_of_wallpapers.57.jpg" /></li>
<li class="loading"><img src="http://fwallpapers.com/files/images/fabulous-windows-7.jpg" /></li>
<li class="loading"><img src="http://www.hd-wallpapers.com/download/windows-7-dark-blue_1920x1200_574-wide.jpg" /></li>
<li class="loading"><img src="http://www.jabzweb.com/wp-content/uploads/2009/09/windows-7-rc1-wallpapers-81.jpg" /></li>
<li class="loading"><img src="http://i1-win.softpedia-static.com/screenshots/Windows-7-Themes_1.jpg" /></li>
<li class="loading"><img src="http://www.kamranweb.com/photos/wp-content/uploads/2009/08/windows-7-wallpaper.jpg" /></li>
<li class="loading"><img src="http://www.fondosytemas.com/wp-content/uploads/Hot_air_balloon_-_Windows_7_desktop_backgrounds.jpg" /></li>
<li class="loading"><img src="http://ziogeek.com/wp-content/uploads/2009/01/windows-7-aurora-green-wallpaper.jpg" /></li>
</ul>
</div></body>
</html>
这是所有代码 有空就帮忙调试一下吧 谢谢
不知道你明白没,呵呵