Я использую масонство для своего макета с плагином Infinite Scroll. Мне нужно было добавить плагин ImagesLoaded в масонство, но когда я это делаю, он, кажется, отключает функциональность бесконечной прокрутки. Когда я добавляю функцию ImagesLoaded в код масонства, бесконечный плагин прокрутки не работает. Он будет работать, если я возьму его с исходного кода масонства и оставлю его на обратном вызове, хотя..
Любые идеи, почему плагин InfiniteScroll не запускается? Заранее спасибо.
-
Перед этим javascript-кодом у меня есть.js файл с плагинами ImagesLoaded, Masonry и Infinite Scroll - в этом порядке.
$(function(){
var $container = $('#container');
// When I add this ImagesLoaded function to the masonry block the infinite scroll plugin doesn't work
$container.imagesLoaded(function(){
$container.masonry({
columnWidth: '.grid',
gutterWidth:0,
isAnimated : true,
resizeable: true,
itemSelector : '.grid'
});
});
// End conflicting code
$container.infinitescroll({
navSelector : 'div.pagination',
nextSelector : 'div.pagination a.older',
itemSelector : '.grid',
loading: {
finishedMsg: "End of the line!",
msgText: "<em class='loading'>Loading...</em>"
},
animate : true,
extraScrollPx:150,
extractLink: true,
pathParse: function() {
return ['{path=site/index}/P','']
},
debug: true,
errorCallback: function() {
// fade out the error message after 2 seconds
$('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
Код, который я использую для плагина ImageLoaded:
// modified by yiannis chatzikonstantinou.
// original:
// mit license. paul irish. 2010.
// webkit fix from Oren Solomianik. thx!
$.fn.imagesLoaded = function( callback ){
var elems = this.find( 'img' ),
elems_src = [],
self = this,
len = elems.length;
if ( !elems.length ) {
callback.call( this );
return this;
}
elems.one('load error', function() {
if ( --len === 0 ) {
// Rinse and repeat.
len = elems.length;
elems.one( 'load error', function() {
if ( --len === 0 ) {
callback.call( self );
}
}).each(function() {
this.src = elems_src.shift();
});
}
}).each(function() {
elems_src.push( this.src );
// webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
// data uri bypasses webkit log warning (thx doug jones)
this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
});
return this;
};
Закончился поиск ответа на мой вопрос.
Вам необходимо инициализировать масонство перед функцией ImagesLoaded. Это создало некоторую странную сортировку при загрузке, поэтому я потерял элемент контейнера через определенное количество времени.
Код:
var $container = $('#container').masonry();
var $container = $('#container' ).css({ opacity: 0 });
$container.imagesLoaded(function(){
$container.delay(1000).animate({ opacity: 1 });
$container.masonry({
columnWidth: '.grid',
gutterWidth:0,
isAnimated : true,
resizeable: true,
itemSelector : '.grid'
});
});