Предотвращение отображения изображения до загрузки всех изображений

Я работаю на веб-странице. На этой странице есть сетка портретов загружаемых ресурсов, которые представлены изображениями. В настоящее время, если кто-то пытается изменить фильтр до загрузки всех изображений, он сломает его.Предотвращение отображения изображения до загрузки всех изображений

Я бы хотел, чтобы эти кнопки не были доступны, пока все изображения на экране не загрузились, и я хотел бы сделать это с помощью JQuery.

Как это сделать?

источник

2016-10-19 K. Carskadon

код записи для обнаружения/подсчитывать изображения при загрузке, а затем проверить правильность подсчета в обработчике кликов, прежде чем разрешить клик через ... или просто не atta ch обработчик клика до завершения загрузки. –

Удалена ненужная ссылка на реальный сайт, чтобы ваше сообщение не удалялось как спам. – jwpfox

Похоже, вы пытаетесь решить неправильную проблему. Не следует ли исправить проблему, которая приводит к разрыву сетки, если фильтр применяется до загрузки изображений? – Luke

Добавьте класс к контейнеру фильтров, который предотвращает взаимодействие таких как:

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

источник

2016-10-19 21:44:56

Отличное спасибо! Я по-прежнему открыт для других предложений, если у них есть люди, но это звучит эффективно и просто. –

Я применил это предложение и, к сожалению, оно, похоже, не разрешает проблему. –

Скрыть все изображения по умолчанию с помощью 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'); 
});

источник

2016-10-22 02:23:37 Abk

Предотвращение отображения изображения до загрузки всех изображений

ответ

Смежные вопросы