Jak uruchomić murowanie tylko po załadowaniu wszystkich filmów html5 za pomocą infinitescroll?

Question

murowane filmy nieskończonego przewijania Dołącz HTML5 nakładających

Obecnie używam imagesLoaded biblioteki, która sprawdza, czy obrazy są ładowane następnie wywołuje masonry.

Ale nie działało z tagiem wideo html5, ponieważ te filmy nakładają się na siebie nawzajem.

więc zmieniłem nazywając masonry z document.ready do window.load i usunięte wezwanie do imagesLoaded na początkowym załadunku tj z tego

$(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'); 
    }); 

}); 

do tego

$(window).load(function(){ 
     var $container = $('#media'); 

      $container.masonry({ 
       "columnWidth": "." + "col-sm-2", 
       itemSelector: '.item', 
       gutter: 0, 
      }); 
      $('.item').css('opacity', '1.0'); 
}); 

teraz html5 videos w masonry nie nakładają się na siebie, a renderują się idealnie na pierwszym ładunku strony, tj. initial load, , ale ponieważ używam również infinite-scroll, co powoduje, że więcej stron jest przewijanych w dół, więc gdy do kontenera dodawane są nowe filmy wideo, są one nakładane, to zachowanie jest spowodowane wczesnym uruchomieniem masonry zanim wszystkie elementy wideo zostaną załadowane jako imagesloaded Nie mogę sprawdzić videos loaded.

to jest kod.

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

     }); 
}); 

Próbowałem zmieniając document.ready do window.load w powyższym kodzie zbyt i usuwanie działa imagesloaded całkowicie, ale jej nie działa z infinitescroll.,

np Zmodyfikowany kod

$(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); 

     }); 
}); 

---

istnieje inny sposób mogę rozwiązać ten problem nakładających się, określając szerokość i wysokość obrazu, ale jako elastyczne projektowanie, określając szerokość i wysokość wideo łamie reakcji.

moje pytanie brzmi, czy istnieje biblioteka js podobna do imagesloaded, która zapewnia, że ​​wszystkie filmy są załadowane, a następnie mogę zadzwonić do muru? lub w jaki sposób mogę się upewnić, że filmy nie uzyskają overlapped na infinitescroll?

---

Aktualizacja 1:

Próbowałem wielu metod, na infinitescroll

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

robi mnóstwo nowej zawartości po pagescroll.

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

nie ładuje nowej treści po zapisie stron.

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

pokrywa treści wideo

więc mam wpadł nazywając infinite-scroll wcześnie i spowolnienie container.masonry przez 3 sekundy, który działa idealnie do teraz., Ale wciąż czeka na właściwego rozwiązania.

np.

bufferPx: 700, 

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

Powyżej opóźnia przejście muru o 3 sekundy.

Próbowałem szukać czegoś podobnego window.load dla div, ale nie ma nikogo, więc moim najlepszym rozwiązaniem jest sprawdzenie, czy wszystkie videos i images są ładowane, a następnie zadzwonić masonry po wywołaniu infinite-scroll

---

dodany demo działa http://plnkr.co/edit/46YzHBJ7eFAXfsPqZB1q możesz zobaczyć problem, klikając uruchom i przewijając w dół.

Answer 1

Wygląda jak można naprawić poprzez oczekiwanie na loadeddata przypadku wideo na

Oto podstawowa idea:

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 Praca tutaj: http://plnkr.co/edit/jXJ7oFxF3sFWBAJuBqdQ?p=preview