防止图像显示，直到所有图像加载

I am working on a webpage. On this page there is a portfolio grid of downloadable resources that are represented with pictures. Currently if someone tries to change the filter before all of the images load it will break it.

I would like those buttons to not be clickable until all of the images on the screen have loaded, and I would like to do so using JQuery.

How can I accomplish this?

Add a class to the filters container that prevents interaction such as:

.disabled {
    pointer-events: none;
}

<div id="filters-container" class="cbp-l-filters-alignCenter disabled">       

And then use the initComplete.cbp event from the plugin to remove it.

$("#grid-container").on('initComplete.cbp', function() {
    $('#filters-container').removeClass('disabled');
});

Hide all images by default using CSS

    img{
    display: none;
    }
/* disable all buttons using class disabled*/

.disabled{
   pointer-events: none;
}

Use Jquery to check if all loaded, then display images and enable buttons

JQuery

$(window).load(function(){
   $('img').fadeIn(800); //or $('img').show('slow');
   $('.disabled').css('pointer-events', 'auto');
});