Question

我有一个页面使用Isotope Masonry布局结合Infinite Scroll。在那个页面上，我还在一个函数（BlogImageLoad）中使用jquery .load动态地将图像加载到一些div中。

使用无限滚动加载新元素时会出现问题，并且BlogImageLoad函数不会触发，因此图像不会加载到新加载的元素中。

我已经搜索了这个网站，而我最接近解决方案是使用无限卷轴中的回调函数，这里有最好看的解决方案：Infinite scroll and the callback

遵循这个逻辑，并牢记我正在慢慢学习jQuery，这是我的代码，它不起作用：

<script>

function BlogImageLoad() {
$('.xg_widget_profiles_blog_list .xg_blog_list .xg_module_body').each(function(){
var SP_Album_Cover = $(this).find("h3 a:nth-child(2)").attr('href');
$(this).append('<a href="'+SP_Album_Cover+'"><div class="SP_Album_Photo"></div></a>');
$(this).find('.SP_Album_Photo').load(''+SP_Album_Cover+' .postbody .xg_user_generated img:first');
});
}

$(document).ready(function() { BlogImageLoad() });

$(document).ajaxComplete(function() {

var $container = $('.xg_widget_profiles_blog_list .xg_blog_list');

$container.isotope({
itemSelector : '.xg_module_body',
});

$container.infinitescroll({
navSelector  : '.xg_widget_profiles_blog_list .xg_blog_list .pagination.easyclear > li:nth-child(4) a',    // selector for the paged navigation 

 nextSelector : '.xg_widget_profiles_blog_list .xg_blog_list .pagination.easyclear > li:nth-child(4) a',  // selector for the NEXT link (to page 2)

itemSelector : '.xg_widget_profiles_blog_list .xg_blog_list .xg_module_body',     // selector for all items you'll retrieve

loading: {
debug: true,
msgText: 'Fetching more gold...',
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/qkKy8.gif'
}
},

// call Isotope as a callback
function( newElements ) {
$container.isotope( 'appended', $( newElements ) ); 
},

function( arrayOfNewElems ) {
BlogImageLoad();
}

);

});
</script>

非常感谢提前！

自定义jQuery函数的无限滚动回调问题

0 个答案: