砌体图像已加载 HTML5 视频海报答案

【问题标题】：Masonry ImagesLoaded HTML5 Video Poster砌体图像已加载 HTML5 视频海报
【发布时间】：2015-06-17 10:26:01
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery jquery-masonry masonry imagesloaded

【解决方案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');

    }

});

【讨论】：

【解决方案2】：

在每个视频之后，我添加一个带有海报来源的<img> 标签和display: none。似乎工作没有问题。也如我所愿； chrome 开发工具报告图像只加载一次。

【讨论】：

【解决方案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/

【讨论】：