砌体图片已加载 HTML5 视频海报

Question

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

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

有没有办法让 ImagesLoaded 与 HTML5 Video Poster 属性配合得很好？

Answer 1

我在 imagesLoaded 的 git 存储库中提出了这个问题。根据作者的说法，该库不支持 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 开发工具报告图像仅加载一次。

Answer 3

要添加到此，在 jquery

的较新版本中

$('video').on('loadeddata',function (){

postersLoaded++;

if (postersLoaded >= posterCount) {


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

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

}

});

其次，人们可能运行进入缓存视频的问题。看看这个 link https://dev.opera.com/articles/consistent-event-firing-with-html5-video/

砌体图片已加载 HTML5 视频海报

Masonry ImagesLoaded HTML5 Video Poster

jquery

jquery-masonry

imagesloaded

masonry