我已经将jscroll集成到html页面中,但是没有任何反映
标头部分
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />
<script src="js/jquery.jscroll.min.js" />
<script src="js/jquery.jscroll.js" />
</head>
<body>
<div class=".scroll">
<!-- html code tag -->
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.scroll').jscroll({
autoTrigger: true
})
});
</script>
</body>
我指的是www.jscroll.com
但是什么都没发生,你可以帮助我吗,我在这里做什么错误?
更新:
![<html>
<head>
<meta charset="utf-8"/>
<title>jQuery jScroll Plugin Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>
<script src="js/jquery.jscroll.js"/>
<link type="text/css" rel="stylesheet" href="layout/css/styles.css" />
</head>
<body>
<div class="scroll" style="margin-top:150px;" data-ui="jscroll-default">
<h3>Page 1 of jScroll Example - jQuery Infinite Scrolling Plugin</h3>
<p>
This is the content of
<strong>page 1</strong>
in the jScroll example. Scroll to the bottom of this box to load the next set of content.
</p>
<p>This is example text for the jScroll demonstration. jScroll is a jQuery plugin for infinite scrolling, endless scrolling, lazy loading, auto-paging, or whatever you may call it.</p>
<p>With jScroll, you can initialize the scroller on an element with a fixed height and overflow setting of "auto" or "scroll," or it can be set on a standard block-level element within the document and the scrolling will be initialized based on the brower window's scroll position.</p>
<h3>Page 2</h3>
<p>
This is the content of
<strong>page 2</strong>
in the jScroll example. Scroll to the bottom of this box to load the next set of content.
</p>
<p>Fusce et nunc sed nibh eleifend posuere. Integer sodales, elit sit amet porta varius, augue elit consectetur tortor, vitae rhoncus diam ipsum sed quam. Nullam turpis magna, convallis ultrices auctor ut, gravida eu leo. Pellentesque ut risus nibh, in ultrices ante. Suspendisse potenti. Vestibulum dolor sapien, dapibus non fringilla at, fringilla sed ipsum. In adipiscing mi nec risus hendrerit sollicitudin. Nullam eget felis tellus. Quisque dapibus molestie scelerisque. Curabitur sit amet tortor erat, et pretium nisl. Phasellus posuere, nibh vel feugiat sagittis, ligula lorem porttitor sapien, quis aliquam nisl nulla vel nunc.</p>
<h3>Page 3 - Final Page</h3>
<p>
This is the content of
<strong>page 3</strong>
in the jScroll example. This is the final page of content, and nothing more will be loaded when you scroll to the bottom of this page.
</p>
<p>
This is the content of
<strong>page 4</strong>
in the jScroll example. This is the final page of content, and nothing more will be loaded when you scroll to the bottom of this page.
</p>
<p>
This is the content of
<strong>page 5</strong>
in the jScroll example. This is the final page of content, and nothing more will be loaded when you scroll to the bottom of this page.
</p>
<p>
This is the content of
<strong>page 6</strong>
in the jScroll example. This is the final page of content, and nothing more will be loaded when you scroll to the bottom of this page.
</p>
<p>
This is the content of
<strong>page 7</strong>
in the jScroll example. This is the final page of content, and nothing more will be loaded when you scroll to the bottom of this page.
</p>
<p>Duis vel vestibulum tortor. Curabitur id nulla nec nunc porta blandit quis gravida eros. Proin dictum sagittis velit porta fringilla. Ut ac libero dui. Donec purus leo, semper condimentum porttitor vitae, feugiat vel elit. Etiam ut erat velit. Proin quis tortor lorem. Pellentesque ut lectus ligula. Donec ullamcorper, tellus at fringilla tristique, quam elit luctus felis, ut venenatis quam erat quis lacus. In consequat imperdiet magna posuere vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin sodales, nisl eu accumsan molestie, mauris sem luctus sem, at volutpat turpis lorem non massa. Nulla erat turpis, auctor id congue ac, placerat et velit. Donec id ipsum erat, non pellentesque turpis. Nulla facilisi.</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.scroll').jscroll({autoTrigger: true})});
</script>
</body>
</html>]
我需要下面的屏幕快照
最佳答案
请参见此处的延迟加载和jscroll示例
$('#product-grid').jscroll({
debug: true,
autoTriggerUntil: 2,
nextSelector: '.pager a:last',
contentSelector: '.product-grid',
callback:call()
});
function call()
{
alert("hi");
$("img.lazy").lazyload();
}
在这里,Product-Grid是div ID,其中包含所有其他类型相同的div,例如产品列表。
.pager'a:last'是分页属性类,例如a:last意味着
1> 2>下一个
因此,“ a:last”会在触发时获取下一个链接,因为您需要加载下一个内容,这样您才能获得
现在,当您获得内容时,如何添加以及需要添加哪些内容,由.product-grid决定
和回调意味着触发后调用函数,因此您可以在此处添加lazyload
我希望现在清除