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

Question

кладка бесконечная прокрутка добавить HTML5 видео перекрывающихся

я сейчас использую imagesLoaded библиотека, которая проверяет, загружены ли изображения, затем вызывает masonry,

Но он не работал с тегом html5 video, потому что это видео накладывается друг на друга.

так что я изменил вызов 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 simmilar для загруженных изображений, которая гарантирует, что все видео загружены, а затем я могу позвонить в масонство? или как я могу убедиться, что видео не получится overlapped на infinitescroll?

---

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

я перепробовал много техник, для бесконечного прокрутки

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

не загружает новый контент после pagecroll.

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

Answer 1

Похоже, вы можете исправить это, ожидая события загруженных данных видео

Вот основная идея:

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
      });
  });

Работающий плункер здесь: http://plnkr.co/edit/jXJ7oFxF3sFWBAJuBqdQ?p=preview