Question

我是jQuery和网络开发的新手，但我会尽我所能给你最好的问题。

我正在使用jQuery插件在只显示图像的网页中执行无限滚动。此插件来自Infinite Scrolling though images。我基本上copy/paste但是由于某种原因它不起作用（对不起，我不能给你更多细节，但我不太深入网络开发）。

我正在osboxes.org的虚拟机中测试此演示。一台linux机器（Ubuntu）。我正在使用firefox altought我尝试使用Opera或Google Chrome来查看浏览器是否存在问题，但事实并非如此。

我尝试了以下问题而没有结果： Infinite scrolling jquery not working

jQuery scroll to element

Masonry callback in jQuery infinite scroll isn't working in Wordpress - and neither are infinite scroll plugins

这是jQuery部分：

<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。

我在w3shool尝试了这个简单的例子，它就像一个魅力：

<!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>

Answer 1

你错过了小提琴中的主要功能endlessScroll

所以我更新了你的小提琴并添加了相应的功能。你可以在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>

jquery无法使用无限滚动

1 个答案: