кладка бесконечной прокрутки добавляет html5 видео перекрытия
В настоящее время я использую библиотеку imagesLoaded
, которая проверяет, загружены ли изображения, а затем вызывает masonry
.
Но он не работал с тегом html5, потому что это видео накладывается друг на друга.
поэтому я изменил вызов masonry
с document.ready
на window.load
и удалил вызов imagesLoaded
при начальной загрузке i.e.
из этого
$(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');
});
теперь html5 videos
в masonry
не перекрываются и отлично отображаются на первой загрузке страницы, т.е. initial load
,
но поскольку я также использую infinite-scroll
, который добавляет больше images/videos
при прокрутке страницы вниз, поэтому, когда новые видео добавляются в контейнер, они перекрываются, это поведение вызвано ранним запуском masonry
до того, как все элементы видео загружаются как imagesLoaded
не могут проверить videos loaded
.
это код.
$(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-библиотека, похожая на загруженные изображения, которая гарантирует, что все видео загружены, а затем я могу позвонить в каменную кладку?
или как я могу убедиться, что видео не получит overlapped
на infinitescroll
?
update 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
, а затем вызвать masonry
после вызова infinite-scroll
добавлена рабочая демонстрация http://plnkr.co/edit/46YzHBJ7eFAXfsPqZB1q вы можете увидеть эту проблему, щелкнув прокрутку и прокрутку вниз.