Как запустить каменную кладку только после того, как все html5-видео загружаются с infinitescroll?

Question

кладочные бесконечной прокрутки Append 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'); 
}); 

Теперь 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?

---

обновление 1:

я перепробовал много методов, для infinitescroll

$(newElements).load(function(){ 
    var $newElems = $(newElements); 
    $newElems.animate({ opacity: 1 }); 
    $container.masonry('appended', $newElems, true); 
}); 

Doesnt нагрузки нового контента после pagescroll.

$(window).load(function(){ 
    var $newElems = $(newElements); 
    $newElems.animate({ opacity: 1 }); 
    $container.masonry('appended', $newElems, true); 
}); 

не загружает новое содержимое после pagecroll.

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 вы можете увидеть проблему, нажав кнопку прокрутки и прокрутив вниз.

Answer 1

Похоже, вы можете исправить это ждет 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