$(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")
})
})
}

解决方案 »

  1.   

    是不是
    load 里面的this指向不对了~~~
      

  2.   

    如果是this指向不对 哪一开始就应该也没有图片才对  现在是一开始加载到图片就是向下拖的时候下面没显示图片
      

  3.   

    <!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>
    <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>
    这是所有代码 有空就帮忙调试一下吧 谢谢
      

  4.   

    看来下,应该是load的顺序的问题,load你放在$()这里面是在dom加载完成后才执行,这时候这个load就不起作用了。
    不知道你明白没,呵呵