jQuery不适用于无限滚动

问题描述：

我是jQuery和Web开发的新手，但我会尽力为您提供您可能遇到的最糟糕的问题.

I'm new to jQuery and web developing but I'll do my best to give you the best damn question that you can ever have.

我正在使用jQuery插件在仅显示图像的网页中执行无限滚动.该插件来自无限滚动图片.我基本上有copy/paste，但是由于某些原因它无法正常工作(很抱歉，我无法提供更多详细信息，但是我对Web开发的了解还不够深.)

I'm using jQuery plug in to perform infinite scroll in a web-page that will only display images. This plugin is from Infinite Scrolling though images. I have basically copy/pastebut it's not working for some reason (I'm sorry I can't give you more details but I'm not too deep into web-developing).

我正在 osboxes.org 的虚拟机中测试此演示. Linux机器(Ubuntu).我现在正在使用Firefox，我尝试使用Opera或Google Chrome来查看浏览器是否有问题，但不是.

I'm testing this demo in a virtual machine from osboxes.org. A linux machine (Ubuntu). I'm using right now firefox altought I tried using Opera or Google Chrome to see if it was some problem with the browser but it's not.

我尝试了以下问题，但没有结果: 无限滚动jquery不起作用

I have tried the following questions with no results: Infinite scrolling jquery not working

jQuery滚动到元素

jQuery infinite中的砌体回调滚动在Wordpress中不起作用-也不是无限滚动插件

这是jQuery部分:

Here is the jQuery part:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.min.js"></script>
    <script>
    $(document).ready(function() {
        $(document).endlessScroll({
            inflowPixels: 300,
            callback: function() {
          var $img = $('#images li:nth-last-child(5)').clone();
          $('#images').append($img);
            }
        });
    });
</script>

身体:

<h1>Infinite Scrolling, Demo 3</h1>

            <ul id="images">
                <li>
                    <a href="https://www.pexels.com/photo/mist-misty-fog-foggy-7919/">
                        <img src="https://pexels.imgix.net/photos/7919/pexels-photo.jpg?fit=crop&w=640&h=480" alt="" />
                    </a>
                </li>
                <li>
                    <a href="https://www.pexels.com/photo/landscape-nature-sunset-trees-479/">
                        <img src="https://pexels.imgix.net/photos/479/landscape-nature-sunset-trees.jpg?fit=crop&w=640&h=480" alt="" />
                    </a>
                </li>
                .... some more images (30 more) .....

不幸的是，我似乎无法使页面进入infinite scroll.

Unfortunally I can't seem to make the page go infinite scroll.

我已经尝试过w3shool中的一个简单示例，它的工作原理很像

I have tried this simple example from w3shool and it works like a charm:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#test").hide();
    });
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>

<button>Click me</button>

</body>
</html>

答

您在小提琴中缺少主要功能endlessScroll

You are missing the main function endlessScroll in your fiddle

因此，我更新了您的小提琴并为其添加了相应的功能.您可以在此链接

So I updated your fiddle and added the respective function to it. You can find the new fiddle under this link

(function($) {

  $.fn.endlessScroll = function(options) {

    var defaults = {
      bottomPixels: 50,
      fireOnce: true,
      fireDelay: 150,
      loader: "<br />Loading...<br />",
      data: "",
      insertAfter: "div:last",
      resetCounter: function() {
        return false;
      },
      callback: function() {
        return true;
      },
      ceaseFire: function() {
        return false;
      }
    };

    var options = $.extend({}, defaults, options);

    var firing = true;
    var fired = false;
    var fireSequence = 0;

    if (options.ceaseFire.apply(this) === true) {
      firing = false;
    }

    if (firing === true) {
      $(this).scroll(function() {
        if (options.ceaseFire.apply(this) === true) {
          firing = false;
          return; // Scroll will still get called, but nothing will happen
        }

        if (this == document || this == window) {
          var is_scrollable = $(document).height() - $(window).height() <= $(window).scrollTop() + options.bottomPixels;
        } else {
          // calculates the actual height of the scrolling container
          var inner_wrap = $(".endless_scroll_inner_wrap", this);
          if (inner_wrap.length == 0) {
            inner_wrap = $(this).wrapInner("<div class=\"endless_scroll_inner_wrap\" />").find(".endless_scroll_inner_wrap");
          }
          var is_scrollable = inner_wrap.length > 0 &&
            (inner_wrap.height() - $(this).height() <= $(this).scrollTop() + options.bottomPixels);
        }

        if (is_scrollable && (options.fireOnce == false || (options.fireOnce == true && fired != true))) {
          if (options.resetCounter.apply(this) === true) fireSequence = 0;

          fired = true;
          fireSequence++;

          $(options.insertAfter).after("<div id=\"endless_scroll_loader\">" + options.loader + "</div>");

          data = typeof options.data == 'function' ? options.data.apply(this, [fireSequence]) : options.data;

          if (data !== false) {
            $(options.insertAfter).after("<div id=\"endless_scroll_data\">" + data + "</div>");
            $("div#endless_scroll_data").hide().fadeIn();
            $("div#endless_scroll_data").removeAttr("id");

            options.callback.apply(this, [fireSequence]);

            if (options.fireDelay !== false || options.fireDelay !== 0) {
              $("body").after("<div id=\"endless_scroll_marker\"></div>");
              // slight delay for preventing event firing twice
              $("div#endless_scroll_marker").fadeTo(options.fireDelay, 1, function() {
                $(this).remove();
                fired = false;
              });
            } else {
              fired = false;
            }
          }

          $("div#endless_scroll_loader").remove();
        }
      });
    }
  };

})(jQuery);

$(document).endlessScroll({
  inflowPixels: 300,
  callback: function() {
    var $img = $('#images li:nth-last-child(5)').clone();
    $('#images').append($img);
  }
});

body {
  margin: 0;
  background-color: #F0F0F0;
  font-family: 'Liberation Sans', Arial, sans-serif;
}

h1 {
  text-align: center;
}

#images {
  margin: 0 auto;
  padding: 0;
  width: 640px;
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<h1>Infinite Scrolling, Demo 3</h1>

<ul id="images">
  <li>
    <a href="https://www.pexels.com/photo/mist-misty-fog-foggy-7919/">
      <img src="https://pexels.imgix.net/photos/7919/pexels-photo.jpg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/landscape-nature-sunset-trees-479/">
      <img src="https://pexels.imgix.net/photos/479/landscape-nature-sunset-trees.jpg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/landscape-sun-trees-path-21008/">
      <img src="https://pexels.imgix.net/photos/21008/pexels-photo.jpg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/cold-snow-landscape-nature-1127/">
      <img src="https://pexels.imgix.net/photos/1127/cold-snow-landscape-nature.jpg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/coastline-aerial-view-sea-9148/">
      <img src="https://pexels.imgix.net/photos/9148/pexels-photo.jpeg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/mist-misty-fog-foggy-7919/">
      <img src="https://pexels.imgix.net/photos/7919/pexels-photo.jpg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/landscape-nature-sunset-trees-479/">
      <img src="https://pexels.imgix.net/photos/479/landscape-nature-sunset-trees.jpg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/landscape-sun-trees-path-21008/">
      <img src="https://pexels.imgix.net/photos/21008/pexels-photo.jpg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/cold-snow-landscape-nature-1127/">
      <img src="https://pexels.imgix.net/photos/1127/cold-snow-landscape-nature.jpg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/coastline-aerial-view-sea-9148/">
      <img src="https://pexels.imgix.net/photos/9148/pexels-photo.jpeg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/mist-misty-fog-foggy-7919/">
      <img src="https://pexels.imgix.net/photos/7919/pexels-photo.jpg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/landscape-nature-sunset-trees-479/">
      <img src="https://pexels.imgix.net/photos/479/landscape-nature-sunset-trees.jpg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/landscape-sun-trees-path-21008/">
      <img src="https://pexels.imgix.net/photos/21008/pexels-photo.jpg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/cold-snow-landscape-nature-1127/">
      <img src="https://pexels.imgix.net/photos/1127/cold-snow-landscape-nature.jpg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
  <li>
    <a href="https://www.pexels.com/photo/coastline-aerial-view-sea-9148/">
      <img src="https://pexels.imgix.net/photos/9148/pexels-photo.jpeg?fit=crop&w=640&h=480" alt="" />
    </a>
  </li>
</ul>

相关推荐