1

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

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

有没有办法让 ImagesLoaded 与 HTML5 Video Poster 属性一起玩得很好？

4

3 回答 3

2

我在 imagesLoaded 的 git repo 上提出了这个问题。据作者介绍，该库不支持 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');

    }

});
于 2015-06-18T15:14:32.593 回答
1

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

于 2019-03-31T23:50:53.637 回答
0

要添加到这一点，在较新版本的 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/

于 2019-09-08T20:15:58.497 回答