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