jQuery不适用于无限滚动 [英] jquery not working with infinite scroll
问题描述
我是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/paste
but 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 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>
这篇关于jQuery不适用于无限滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!