如何在所有html5视频都加载了无限滚动后才运行砖石
How to run masonry only after all html5 videos are loaded with infinitescroll?
砖石无限滚动附加html5视频重叠
我当前正在使用CCD_ 1库,该库检查图像是否已加载,然后调用CCD_。
但它不适用于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 videos
不重叠并且在页面的第一次加载即initial load
上完美呈现,但由于我也在使用imagesLoaded
0,它在向下滚动页面时添加了更多的images/videos
,因此当新视频被添加到容器中时,它们正在重叠,这种行为是由于imagesloaded
无法检查videos loaded
,在加载所有视频元素之前masonry
的早期运行所引起的。
这是代码。
$(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);
});
});
我还有另一种方法可以解决这个重叠问题,通过指定视频宽度和高度,但由于其响应性设计,指定视频宽度与高度会破坏响应性。
所以我的问题是,有没有js库simmilar可以加载imageslooaded,它可以确保所有视频都已加载,然后我可以调用masony?或者我如何确保视频不会在masonry
0上获得overlapped
?
更新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);
重叠视频内容
所以我想出了提前调用CCD_ 21并将CCD_。,但仍在等待合适的解决方案。
例如
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您可以通过单击run并向下滚动来查看问题。
看起来您可以通过等待视频的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
- 结合jQuery和jetpack无限滚动
- jquery/ajax无限滚动事件
- 内容结束时停止无限滚动
- 使用滚动溢出-x进行无限循环
- jquery无法使用无限滚动
- 无限滚动交替
- 无限滚动更改ID问题
- 如何在重建URL后从URL中传递过滤值,目的是使用Angular2和Typescript实现无限滚动
- 使用jquery或javascript延迟无限滚动
- Javascript-Nightmare.JS无限滚动操作
- Javascript-无限滚动JSON数组
- 如何正确地以无限滚动浏览网页
- 无限滚动jquery不起作用
- 我如何发送AJAX请求的内容是通过无限滚动加载的
- jQuery逻辑-无限滚动+调用javascript
- jQuery-无限滚动
- 刷新jqGrid;t在启用无限滚动的情况下保存当前页面位置
- 我如何从一个无限滚动的网站抓取图像,其中api是隐藏的,我无法通过使用Inspect Element获得它->网络
- 无限滚动在IE中返回多个结果
- Angular UI Grid重用的网格无法重置滚动+无限滚动无法工作