Question

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

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

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

Answer 1

我在imagesLoaded＆＃39; 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开发工具报告该图像仅加载一次。

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/

Masonry ImagesLoaded HTML5视频海报

3 个答案: