JQuery Mobile LazyLoad问题

时间:2013-03-14 18:13:33

标签: javascript jquery-mobile lazy-loading

所以我在一个jQuery页面上对ListView进行延迟加载。单击ListItem时,它会将您带到详细信息页面。问题是,因为我已将scrollstop事件绑定到窗口,所以延迟加载仍会尝试在详细信息页面上触发。

$("#index").on("pageshow", function () {
  //get initial list view data

  var inital = $('#filters').serialize(); //gets 'filter' params for data-access
  RetrieveMeetings(inital);  //Populate initial set

  //lazy load
  //Window Event From: http://stackoverflow.com/questions/9983835/detect-if-user-has-scrolled-to-the-bottom-of-a-div
  $(window).bind('scrollstop', function () { //this also fires on details page!!!
    var screenBottom = $(this).scrollTop() + parseInt($(window).height());
    var $div = $('#meetings-list');
    var divBottom = $div.offset().top + parseInt($div.height());

    if (screenBottom > divBottom) {
       var values = $('#filters').serialize();
       LoadMoreMeetings(values);
    }
  });

  //new dataset from filter forum
  $("#submit").click(function (event) {

    /* stop form from submitting normally */
    event.preventDefault();
    var values = $('#filters').serialize();
    ResetMeetingList();
    RetrieveMeetings();

  });

});

我可以通过从page事件上的DOM中删除pagehide来修复此问题,但是当用户返回ListView时,我会丢失过滤器论坛的页面状态(也会增加页面加载量)时间)。

    //remove pages from DOM on hide
    $(document).on("pagehide", function (e) {
        $(e.target).remove();
    });

是否有人将scrollstop事件附加到page而不是window

这种方法的另一个问题是,如果屏幕大到足以在没有滚动条的情况下加载页面,那么延迟加载显然不会触发!也许这个问题有更好的整体解决方案?

0 个答案:

没有答案