图片LazyLoad 

<!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>
    <title>lazy load page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        function lazyload(){
            $("img").each(function(){
                if(($(this).offset().top)<$(window).height()+$(document).scrollTop()&&($(this).offset().left)<$(window).width()+$(document).scrollLeft())
                {
                    $(this).attr("src",$(this).attr("file"));
                }
            });
        }
       lazyload();
       $(window).scroll(lazyload);
       $(window).resize(lazyload);
    });
       
    </script>
</head>

<body>

    <table>
        <tr>
            <td><img src="image/QQ截图20111011092204.png" file="image/p_large_S0Vy_4237000229cc5c73.jpg" alt=""/></td>
            <td><img src="image/QQ截图20111011092204.png" file="image/p_large_S0Vy_4237000229cc5c73.jpg" alt=""/></td>
            <td><img src="image/QQ截图20111011092204.png" file="image/p_large_S0Vy_4237000229cc5c73.jpg" alt=""/></td>
            <td><img src="image/QQ截图20111011092204.png" file="image/p_large_S0Vy_4237000229cc5c73.jpg" alt=""/></td>
            <td><img src="image/QQ截图20111011092204.png" file="image/p_large_S0Vy_4237000229cc5c73.jpg" alt=""/></td>
            <td><img src="image/QQ截图20111011092204.png" file="image/p_large_S0Vy_4237000229cc5c73.jpg" alt=""/></td>
        </tr>
    </table>
    <img src="image/QQ截图20111011092204.png" file="image/p_large_S0Vy_4237000229cc5c73.jpg" alt=""/><br/>
    <img src="image/QQ截图20111011092204.png" file="image/p_large_S0Vy_4237000229cc5c73.jpg" alt=""/><br/>
    <img src="image/QQ截图20111011092204.png" file="image/p_large_S0Vy_4237000229cc5c73.jpg" alt=""/><br/>
    <img src="image/QQ截图20111011092204.png" file="image/p_large_S0Vy_4237000229cc5c73.jpg" alt=""/><br/>
    <img src="image/QQ截图20111011092204.png" file="image/p_large_S0Vy_4237000229cc5c73.jpg" alt=""/><br/>
    <img src="image/QQ截图20111011092204.png" file="image/p_large_S0Vy_4237000229cc5c73.jpg" alt=""/><br/>
    <img src="image/QQ截图20111011092204.png" file="image/p_large_S0Vy_4237000229cc5c73.jpg" alt=""/><br/>
    <img src="image/QQ截图20111011092204.png" file="image/p_large_S0Vy_4237000229cc5c73.jpg" alt=""/><br/>
</body>
</html>

说明：1.判定图片是否在可视区域，这里只考虑了图片右上角

　　　2.src为替代图片，一般为一个小的空白图片，file为实际地址

posted on 2011-10-11 11:43  寂寞成灾  阅读(483)  评论(0)  编辑  收藏  举报

导航