jqueryjquery-masonrymasonryimagesloaded

Masonry ImagesLoaded HTML5 Video Poster


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?


Solution

  • 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');
    
        }
    
    });