砖石无限滚动追加HTML5视频重叠
我目前正在使用imagesLoaded库，它会检查图像是否加载完成，然后调用masonry。
但是，由于这个库不能与HTML5视频标签配合使用，因此视频会重叠在一起。
因此，我将masonry的调用从document.ready改为window.load，并在初始加载时删除对imagesLoaded的调用。具体来说，就是从以下这行代码：
$(document).ready(function(){
var $container = $('#media');
// layout Masonry again after all images have loaded
$container.imagesLoaded( function() {
$container.masonry({
"columnWidth": "." + "col-sm-2",
itemSelector: '.item',
gutter: 0,
});
$('.item').css('opacity', '1.0');
});
});
$(window).load(function(){
var $container = $('#media');
$container.masonry({
"columnWidth": "." + "col-sm-2",
itemSelector: '.item',
gutter: 0,
});
$('.item').css('opacity', '1.0');
});
现在，在masonry中的html5视频不会重叠，并且在页面的第一次加载即初始加载时完美呈现，
但是，由于我还使用了infinite-scroll，它会在向下滚动页面时添加更多的图像/视频，因此当新的视频被添加到容器中时它们会重叠，这种行为是由于masonry在所有视频元素被加载之前过早运行造成的，因为imagesloaded无法检查视频加载。
这是代码。
$(document).ready(function(){
var $container = $('#media');
var no_more_media = "<?= Lang::get('lang.no_more_to_load') ?>";
var loading_more_media = "<?= Lang::get('lang.loading_more_media') ?>";
$container.imagesLoaded(function(){
$container.masonry();
});
$container.infinitescroll({
loading: {
finished: undefined,
finishedMsg: "<p>" + no_more_media + "</p>",
img: "data:image/gif;base64,R0lGODlhAQABAHAAACH5BAUAAAAALAAAAAABAAEAAAICRAEAOw==",
msg: null,
msgText: "<div class='loading'><i></i><i></i><i></i></div><p>" + loading_more_media + "</p>",
selector: null,
speed: 'fast',
start: undefined,
},
navSelector : "ul.pagination",
// selector for the paged navigation (it will be hidden)
nextSelector : "ul.pagination a:first",
// selector for the NEXT link (to page 2)
itemSelector : ".container #media .item",
animate: false,
bufferPx: 160,
},
function( newElements ) {
// hide new items while they are loading
//var $newElems =
$.each($(newElements), function(index, value){
item_click_events($(value));
});
$( newElements ).css({ opacity: 0 });
$(newElements).imagesLoaded(function(){
var $newElems = $( newElements );
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true);
}
);
});
});
我尝试将上面的代码中的 document.ready 改为 window.load，并完全删除运行 imagesloaded，但与 infinitescroll 一起使用时仍然无法正常工作。
例如，修改后的代码：
$(window).load(function(){
var $container = $('#media');
var no_more_media = "<?= Lang::get('lang.no_more_to_load') ?>";
var loading_more_media = "<?= Lang::get('lang.loading_more_media') ?>";
$container.masonry();
$container.infinitescroll({
loading: {
finished: undefined,
finishedMsg: "<p>" + no_more_media + "</p>",
img: "data:image/gif;base64,R0lGODlhAQABAHAAACH5BAUAAAAALAAAAAABAAEAAAICRAEAOw==",
msg: null,
msgText: "<div class='loading'><i></i><i></i><i></i></div><p>" + loading_more_media + "</p>",
selector: null,
speed: 'fast',
start: undefined,
},
navSelector : "ul.pagination",
// selector for the paged navigation (it will be hidden)
nextSelector : "ul.pagination a:first",
// selector for the NEXT link (to page 2)
itemSelector : ".container #media .item",
animate: false,
bufferPx: 160,
},
function( newElements ) {
// hide new items while they are loading
//var $newElems =
$.each($(newElements), function(index, value){
item_click_events($(value));
});
$( newElements ).css({ opacity: 0 });
var $newElems = $( newElements );
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true);
});
});
还有另一种方法可以解决重叠问题，即指定视频的宽度和高度，但由于它是响应式设计，指定视频的宽度和高度会破坏其响应性。
所以我的问题是， 是否有类似于 imagesloaded 的 js 库，可以确保所有视频都已加载，然后我才能调用 masonry？ 或者我如何确保视频在 infinitescroll 上不会发生重叠？
更新 1：
我尝试了许多技术，用于 infinitescroll。
$(newElements).load(function(){
var $newElems = $( newElements );
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true);
});
页面滚动后未能加载新内容。
$(window).load(function(){
var $newElems = $( newElements );
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true);
});
滚动页面后无法加载新内容。
var $newElems = $( newElements );
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true);
视频内容重叠
所以我想到了提前调用 infinite-scroll 并将 container.masonry 延迟 3 秒，目前这个方法可以完美解决问题，但仍在等待更好的解决方案。
例如：
bufferPx: 700,
setTimeout(function(){
var $newElems = $( newElements );
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true);
}, 3000);
上述代码延迟了3秒后才运行砌体布局。
我试图找到类似于 window.load 的 div，但是没有，所以我的最佳选择是检查所有的videos 和 images是否加载完成，然后在调用infinite-scroll之后再调用masonry。
增加了可工作的演示http://plnkr.co/edit/46YzHBJ7eFAXfsPqZB1q你可以通过点击“run”并向下滚动来查看问题。