我正在使用带有预填充选项的JQuery Infinite Scrolling和JQuery Isotope 。它在除 IE8 之外的所有主流浏览器中都能正常工作。在 IE8 中只加载第一组元素,仅此而已。
我该怎么做才能让预填充在 IE8 中工作?
这是我的 JavaScript:
var $container = $('#container');
$container.imagesLoaded(function(){
$container.isotope({
itemSelector : '.item',
animationEngine: 'best-available',
masonry: {
columnWidth: 150
}
});
});
$container.infinitescroll({
prefill: true,
animate : false,
bufferPx : 40,
binder: $(window),
navSelector : '#page-nav', // selector for the paged navigation
nextSelector : '#next-page', // selector for the NEXT link (to page 2)
itemSelector : '.item', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
msgText: "<em>Loading ...</em>",
img: 'http://i.imgur.com/qkKy8.gif'
}
},
// call Isotope as a callback
function(newElements, data, url) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to Isotope layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.isotope( 'appended', $( newElements ) );
});
}
);
我的CSS:
.item {
margin: 5px;
position: absolute;
}