JS 自动加载图片 

<html>
<head>
<title>图片自动加载</title>
<script type="text/javascript" src="http://www.loqall.com/js/jquery-1.7.1.min.js"></script>
<script>
var globalcount = 0;
function feedToolBar(id)
{

    $(document).ready(function(){
         $(window).bind("scroll", function(event){
           var fold = $(window).height() + $(window).scrollTop();

           if( fold >= $('#'+id).offset().top-20){
            p = parseInt($('#'+id).attr('page'));
            nextpage = p+1;
            url =$('#'+id).attr('query');

            maxpage = parseInt($('#'+id).attr('max'));
            if(globalcount == 1){return false;}//如果进入队列的就跳出

            if(p >= maxpage)
            {
                $('#'+id).html('<img src="http://www.loqall.com/tpl/image/hand.gif" class="loading"/>look more...');
            }else{
                    globalcount = 1; //已经进入队列了
                    $('#'+id).html('<img src="http://www.loqall.com/tpl/image/loading.gif" class="loading"/><span>wait for a moment</span>');
                    $.post(url,{page:p},function(){
                        area = $('#'+id).attr('area');
                        $('#'+area).append('<li><img src="3.jpg" class="image"/></li><li><img src="4.jpg" class="image"/></li>');
                        $('#'+id).attr('page',nextpage);
                        globalcount = 0; //出队列
                    })
            }
           }
         });
    });
}
</script>
</head>

<body>
<ul id="feedArea">
    <li><img src="1.jpg" class="image"/></li>
    <li><img src="2.jpg" class="image"/></li>
</ul>
<div id="feedAjaxTool" page="1" max="4" area="feedArea" query="#" class="feedajax"></div>
<script>feedToolBar('feedAjaxTool');</script>
</body>
</html>
posted @ 2012-07-03 14:33  李秋  阅读(1297)  评论(0)    收藏  举报