Masonry ImagesLoaded HTML5视频海报

Question

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

虽然这适用于img标签中的图像，但它不适用于HTML5 Video's poster tag。

有没有办法让ImagesLoaded与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');

    }

});

Answer 2

在每个视频后，我添加了<img>标签与海报源和display: none。似乎没有问题。我也希望如此; chrome dev工具报告图像仅加载一次。