jquery - 加载完整记录后，Ajax Loader gif 继续显示在向下滚动条上

Question

我正在制作一个 MVC Web 应用程序，在我的应用程序中，我在用户向下滚动页面时使用 Ajax 加载记录，但问题是在加载完整记录后，当用户再次向下滚动页面时，ajax 加载器 gif 再次显示但消失。那真的很烦人。有什么方法可以在加载完整记录后禁用加载器 gif。任何帮助将不胜感激。 我的 JavaScript 代码是这样的:

 var page = 0;
    var _inCallback = false;
    function loadProducts() {
        if (page > -1 && !_inCallback) {
            _inCallback = true;
            page++;
            $('div#loading').html('<p><img src="/Content/ajax-loader.gif"></p>');
            $.get("/Sort/ALL/" + page, function (data) {
                if (data != '') {
                    $("#productList").append(data);
                }
                else {
                    page = -1;
                }
                _inCallback = false;
                $('div#loading').empty();
            });
        }
    }
    var dcList = true;
    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            loadProducts();
        }
    });

注意:我计算了页数并设置为条件，它也不起作用。 需要帮忙。谢谢

Answer 1

试试这个:

var page = 0;
var _inCallback = false;
  function loadProducts() {
        if (!_inCallback) {
            _inCallback = true;
            page++;
            $('div#loading').html('<p><img src="/Content/ajax-loader.gif"></p>');
            $.get("/Sort/ALL/" + page, function (data) {
                if (data != '') {
                    $("#productList").append(data);
                }
               if( page >= 24 )  {
                     //If we are done, delete the event from window, and delete the loader
                    $(window).off("scroll");
               } else {
                    //The else is only to be sure we wont have another call to the get, it shouldn't be necessary 
                    _inCallback = false;
               }
                $('div#loading').empty();
            });
        }
    }