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

Question

我正在开发一个网页。在此页面上有一个可下载资源的投资组合网格，用图片表示。目前，如果有人在所有图片加载之前尝试更改过滤器，则会破坏它。

我希望这些按钮不会被点击，直到屏幕上的所有图像都加载完毕，我想用JQuery这样做。

我该如何做到这一点？

Answer 1

向过滤器容器添加一个类，以阻止交互，例如：

.disabled {
    pointer-events: none;
}

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

然后使用插件中的initComplete.cbp事件将其删除。

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

Answer 2

默认使用CSS隐藏所有图像

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

.disabled{
   pointer-events: none;
}

使用Jquery检查是否全部加载，然后显示图像并启用按钮

JQuery的

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