Imageslooaded无法使用Infinite Ajax Scroll和Masonry
Imagesloaded not working with Infinite Ajax Scroll and Masonry
我有一个网站,它使用bootstrap和我用砖石创建的新闻,我使用了Infinite Ajax Scroll,它调用不同div中的其他新闻,而不是预默认新闻。然而,通常情况下,如果快速滚动页面,或者连接速度较慢,元素会重叠,无法返回原位,我认为这是因为它无法加载图像。我试图集成Imageslooaded,但它似乎无法正常工作。。。我不知道该怎么办。。。以下是我所说的消息来源,HTML:
<div class="row masonry_base altre">
{$news}
</div>
<div class="row masonry altre">
<div class="col-lg-4 col-md-6 col-xs-12 post-grid">
{$news_scroll}
</div>
</div>
JS:
<script>
(function($) {
"use strict";
var $container = $('.masonry_base');
$($container).imagesLoaded( function(){
$($container).masonry({
itemSelector: '.post-grid',
columnWidth: '.post-grid'
});
});
})(jQuery);
</script>
<script type="text/javascript">
var container = document.querySelector('.masonry');
var msnry = new Masonry( container, {
itemSelector: '.post-grid',
gutterWidth: 20
});
msnry.reloadItems()
var $container = $('.masonry');
$($container).imagesLoaded( function(){
$($container).masonry({
itemSelector: '.post-grid',
columnWidth: '.grid',
gutterWidth: 20
});
});
var ias = $.ias({
container: ".masonry",
item: ".post-grid",
pagination: "#pagination",
next: ".next a",
delay: 1200
});
ias.on('render', function(items) {
$(items).css({ opacity: 0 });
});
ias.on('rendered', function(items) {
msnry.appended(items);
});
ias.extension(new IASSpinnerExtension());
ias.extension(new IASNoneLeftExtension({
html: '<div class="btn btn-info btn-block btn-icon-left ias-noneleft" style="text-align:center"><p><em>No news</em></p></div>'
}));
</script>
此代码:
$($container).imagesLoaded( function(){
$($container).masonry({
itemSelector: '.post-grid',
columnWidth: '.grid',
gutterWidth: 20
});
});
仅将imagesLoaded
应用于$container
执行时发生的任何情况。它不适用于动态添加的内容。您应该对添加的动态内容再次调用此函数。也许在您的rendered
回调中。
此外,您只需在加载图像后调用msnry.layout()
来调整内容(无需再次调用$.masonry
)
希望它能帮助
相关文章:
- 无法在通过jQuery的ajax加载的页面中执行javascript
- 如何通过ajax刷新JSF填充的javascript变量
- 如何在php文件中获取$.post-ajax传递的值
- Replacing $ .ajax?
- 在使用Polymer'加载所有json文件后执行方法;s的核心ajax
- Ajax发布表单序列化,发布引号'
- 通过Ajax将JavaScript函数传递给PHP文件
- ajax请求的顺序总是不同的
- 可以't使用Polymer's的核心ajax
- Ajax Live搜索发布到Laravel视图
- Ajax聊天消息重复而不仅仅是更新
- 从控制器返回后Ajax启动事件激发
- PHP AJAX图片上传示例不上传
- 从ajax请求中获取javascript对象
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 如何在Javascript中解析AJAX数组的特定部分
- Ajax文件加载和<输入>文件加载
- Javascript/jQuery中的并行Ajax调用
- Imageslooaded无法使用Infinite Ajax Scroll和Masonry
- 使用iron-ajax、iron-list和通过iron-scroll-threshold加载处理大型JSON文件