- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
masonry 无限滚动附加 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 视频
不重叠,并且在页面的第一次加载时完美呈现,即 initial load
,但因为我也在使用 infinite-scroll
,它在向下滚动页面时添加了更多 images/videos
,所以当新视频被添加到容器时,它们会被重叠,这种行为是由于 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:
我已经尝试了很多技术,用于无限滚动
$(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 秒。
我试着为 div
寻找类似 window.load
的东西,但是没有,所以我最好的选择是检查是否所有的 videos
和images
被加载,然后在调用infinite-scroll
masonry
添加了工作演示 http://plnkr.co/edit/46YzHBJ7eFAXfsPqZB1q您可以通过单击运行并向下滚动来查看问题。
最佳答案
看起来你可以通过等待视频的 loadeddata 事件来修复它
基本思路是:
function waitForvidLoad(vids, callback) {
/* if no videos i.e. mobile mode only gifs and jpgs then call callback else masonry breaks.*/
if(vids.length === 0){
callback();
}
var vidsLoaded = 0;
vids.on('loadeddata', function() {
vidsLoaded++;
if (vids.length === vidsLoaded) {
callback();
}
});
}
.
var $container = $('#container');
var vids = $('#container').find('video');
waitForvidLoad(vids, function() {
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: '.box',
columnWidth: 100
});
});
在这里工作的plunker: http://plnkr.co/edit/jXJ7oFxF3sFWBAJuBqdQ?p=preview
关于javascript - 如何仅在所有 html5 视频加载 infinitescroll 后才运行砌体?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38811027/
我是一名优秀的程序员,十分优秀!