砌体图像加载HTML5视频海报

Question

我正在使用砖石.js以及imagesloaded.pkgd.js插件。ImagesLoaded脚本应该在初始化砖石之前检测浏览器何时完成加载图像。

虽然这适用于img标签中的图像，但它不适用于HTML5 Video的海报标签。

有没有办法让 ImagesLoaded 与 HTML5 视频海报属性很好地配合使用？

Answer 1

我在imagesLoaded的git存储库中提出了这个问题。根据作者的说法，该库不支持HTML5视频海报加载，但它已被记录为功能请求。

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

我决定使用 jQuery 的 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');
    }
});

Answer 2

在每个视频之后，我都会添加一个带有海报来源和display: none的<img>标签。似乎可以毫无问题地工作。也如我所希望;Chrome 开发者工具报告该图片仅加载一次。

Answer 3

补充一点，在较新版本的jquery中

$('video').on('loadeddata',function (){
postersLoaded++;
if (postersLoaded >= posterCount) {

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

}）;

其次，可能会遇到视频被缓存的问题。 查看此链接https://dev.opera.com/articles/consistent-event-firing-with-html5-video/