Question

我试图在屏幕底部调出一个警告，但不要为什么只在我滚动顶部时调用。

$(window).scroll(function(){
        if($(document).height()==$(window).scrollTop()+$(window).height()){
        alert($(document).height());                                //1926 at top
        alert($(window).scrollTop()+$(window).height());            //1926 at top
        }
    });

我的页面包含他们需要时间加载的图片，但始终是警报呼叫。

我正在研究chrome和Mozilla。我也在使用这个jQuery，我确信这个bug是由于这个：

http://www.webski.com.au/blog/web-design/blocksit-js-jquery-plugin-for-dynamic-grid-layout-like-pinterest/23-oct-2013/0051/

实际上我想在jQuery上加入分页。

Answer 1

这只是一个如何做的例子。

http://jsfiddle.net/qpnamqfd/1/

<强> JQ：

$(document).ready(function() {

    //calls a function that creates BloksIt
    $(window).load( function() {
        initBloksIt();
    });

    //window resize
    var currentWidth = 1100;
    $(window).resize(function() {
        var winWidth = $(window).width();
        var conWidth;
        if(winWidth < 660) {
            conWidth = 440;
            col = 2
        } else if(winWidth < 880) {
            conWidth = 660;
            col = 3
        } else if(winWidth < 1100) {
            conWidth = 880;
            col = 4;
        } else {
            conWidth = 1100;
            col = 5;
        }

        if(conWidth != currentWidth) {
            currentWidth = conWidth;
            $('#container').width(conWidth);
            $('#container').BlocksIt({
                numOfCol: col,
                offsetX: 8,
                offsetY: 8
            });
        }
    });


var pageNum=1;// current page

//If the bottom of the page
//Upload a new photo page
$(window).scroll(function(){ 
   var end=($(window).scrollTop() == ($(document).height() - $(window).height()));
   if(end==true)
   {
        pageNum++;        
        getPage(pageNum); 
   }   
})

//create BloksIt
function initBloksIt()
{
    //blocksit define   
    $('#container').BlocksIt({
        numOfCol: 5,
        offsetX: 8,
        offsetY: 8
    });

}

function getPage(pageNum)
{

    //ajax call in order to receive a new page image
    //return json array 
    //{img:'xxx','title':'xxx','desc':'xxx','meta':'xxx','img':'xxx'}

    $.post('getpage.php'
        ,{
            'page':pageNum,
        }
        ,function(data, textStatus, jqXHR){   

             $.each(data,function(i,item){

                //create new image holder
                var html = '<div class="grid">';
                        html += '<div class="imgholder">';
                          html += '<img src="'+item.img+'" />';
                        html += '</div>';
                        html += '<strong>'+item.title+'</strong>';
                        html += '<p>'+item.desc+'</p>';
                        html += '<div class="meta">'+item.meta+'</div>';
                    html += '</div>';

                //add image holder to container
                $('#container').append(html);

             })

            //After adding holders recreate the BlocksIt
            initBloksIt()

        }
        ,'json'
    )       
}


});

<强> PHP：

getpage.php 应该返回类似这样的内容

[{"title":"Title 0/1","desc":"Lorem ipsum 0/1","meta":"by meta 0/1","img":"http://placehold.it/175&text=0/1"},
{"title":"Title 1/1","desc":"Lorem ipsum 1/1","meta":"by meta 1/1","img":"http://placehold.it/175&text=1/1"}
,{"title":"Title 2/1","desc":"Lorem ipsum 2/1","meta":"by meta 2/1","img":"http://placehold.it/175&text=2/1"},
{"title":"Title 3/1","desc":"Lorem ipsum 3/1","meta":"by meta 3/1","img":"http://placehold.it/175&text=3/1"},]

Answer 2

你可以使用jQuery的.load（）方法;

当加载事件和所有子元素已完全加载时，会将事件发送到元素。此事件可以发送到与URL关联的任何元素：图像，脚本，框架，iframe和窗口对象。

;(function($){

  $(document).on( "load", function(){

    $(window).scroll(function(){
      if($(document).height()==$(window).scrollTop()+$(window).height()){
      alert($(document).height());                                //1926 at top
      alert($(window).scrollTop()+$(window).height());            //1926 at top
      }
    });

  });

})(jQuery);

Answer 3

在绑定事件侦听器之前，您必须等待加载所有图像：

jQuery(function($) {
  var $imgs = $('img');

  var poolSize = $imgs.length;

  $imgs.each(function() {
    // use a new image and add the listerner here 
    // so we ensure that the load / error event is fired:
    var img = new Image();
    var $img = $(img);
    $img.on('load error', tick);
    img.src = this.src;
  }); 

  function tick() { 
    if ( --poolSize == 0 ) {
      imagesLoaded();
    } 
  }
  function imagesLoaded() {
    $(window).on('scroll', function() {
      // scroll check from your original code:
      // ...
    });
  }
});

Answer 4

将$(window).scrollTop()的值四舍五入会使其正常工作

http://jsfiddle.net/buithehoa/1anquu74/3/

Answer 5

    $(document).on("scrollstart",function(){
      alert("Started scrolling!");
    });

$(document).on("scrollstop",function(){
  alert("Stopped scrolling!");
});
    i think you used .scroll event it fire when you start scrolling. it may be help you.

Answer 6

我之前在滚动时点击分页时做了类似的事情。以下是我如何实现它的一个例子：http://jsfiddle.net/3b73upms/。

它只是检查容器元素的底部是否在浏览器视口中。

$(function() {
    var el = $('#MyElement');
    checkScroll(el)
    $(window).on('scroll', function() {
        checkScroll(el);
    });
});

function checkScroll(el) {
    var bottom_of_object = el.offset().top + el.outerHeight();
    var bottom_of_window = $(window).scrollTop() + $(window).height();

    if (bottom_of_window >= bottom_of_object) { // If the bottom the object is in the viewport
        if ($('#paging a')[0]) { // If we have a pagination object
            $('#paging a').each(function (index) { // Loop through paging links
                if (index == 0) {  // Find the first one
                    $(this).trigger('click'); // Click it
                    $(this).remove(); // Remove it so it isn't clicked again
                }
            });

            //Simulate the height getting bigger with more content
            el.height(el.height() + 500)
        }
    }
}

还有一些虚拟的HTML用于衡量标准：

<div id="container">
    <div id="paging">
        <a href="#1">1</a>
        <a href="#2">2</a>
        <a href="#3">3</a>
        <a href="#4">4</a>
        <a href="#5">5</a>
    </div>
    <div id="MyElement">
    </div>
</div>

Click here查看我的原始代码（当您向下滚动时，更多产品会加载AJAX）。

^截至2014年11月28日，我现在不在同一家公司工作

希望它有所帮助！

试图在窗口底部调用警报进行分页

6 个答案: