Masonry ImagesLoaded HTML5 Video Poster

Question

I'm using masonry.js along with the imagesloaded.pkgd.js plugin. The ImagesLoaded script is supposed to detect when the browser has finished loading images before initialising masonry.

Whilst this works with images in img tags it doesn't work with HTML5 Video's poster tag.

Is there a way to get ImagesLoaded to play nice with the HTML5 Video Poster attribute?

Answer 1

I raised the issue on imagesLoaded's git repo. According to the author, the library doesn't support HTML5 video poster loading but it has been logged as a feature request.

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

I decided to use jQuery's Load method which has a callback that fires after the element has loaded. Since I wanted to fire a single callback after all images were loaded I just included a counter.

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

To add to this, in the newer version of jquery

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

postersLoaded++;

if (postersLoaded >= posterCount) {


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

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

}

});

secondly one might run into issues of the videos being cached. check out this link https://dev.opera.com/articles/consistent-event-firing-with-html5-video/

Answer 3

After each video I add an <img> tag with the poster source and display: none. Seems to work without issues. Also as I would hope; chrome dev tools reports the image is only loaded once.