Masonry ImagesLoaded HTML5 видео постер

Question

Я использую masonry.js вместе с плагином imagesloaded.pkgd.js. Предполагается, что скрипт ImagesLoaded определяет, когда браузер завершил загрузку изображений перед инициализацией кладки.

Хотя это работает с изображениями в тегах img, оно не работает с тегами автора HTML5 Video.

Есть ли способ заставить ImagesLoaded хорошо играть с атрибутом HTML5 Video Poster?

Answer 1

Я поднял вопрос о git-репозитории imagesLoaded. По словам автора, библиотека не поддерживает загрузку видео-постера HTML5, но она была зарегистрирована как запрос функции.

https://github.com/desandro/imagesloaded/issues/197

Я решил использовать метод Load jQuery с обратным вызовом, который срабатывает после загрузки элемента. Так как я хотел запустить один обратный вызов после загрузки всех изображений, я просто включил счетчик.

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 Tools сообщает, что изображение загружается только один раз.

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/