砌體圖像加載HTML5視頻海報

Question

我正在使用masonry.js以及imagesloaded.pkgd.js插件。在初始化砌體之前，ImagesLoaded腳本應該檢測瀏覽器何時完成加載圖像。

雖然這與img標籤中的圖像一起使用，但它不適用於HTML5 Video's poster tag。

有沒有辦法讓ImageLoaded與HTML5 Video Poster屬性一起玩呢？

Answer 1

我在imagesLoaded的git repo上提出了這個問題。據作者說，圖書館不支持HTML5視頻海報加載，但它已被記錄爲功能請求。

https://github.com/desandro/imagesloaded/issues/197

我決定使用具有該元素後將觸發的加載回調jQuery's Load方法。由於我想在加載完所有圖像後觸發單個回調，因此我只包含一個計數器。

var posterCount = $('video').length; 
var postersLoaded = 0; 

$('video').load(function() { 

    postersLoaded++; 

    if (postersLoaded >= posterCount) { 


     $('#contentList').masonry({ 
      itemSelector: '.csContent' 
     }); 

     $('#contentList').masonry('reloadItems'); 
     $('#contentList').masonry('layout'); 

    } 

});