Выполнение JS / jQ до полной загрузки изображений

Question

У меня есть следующий код, он вычисляет ширину группы изображений в горизонтальной галерее и применяет ее к элементу div, чтобы они все подходили:

jQuery(window).load(function() {
var totalwidth=0;

jQuery('#gallery img').each(function(){
totalwidth+= jQuery(this).width() + 15;
});

jQuery('#gallery').width(totalwidth+100);
});

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

Может ли он не рассчитать ширину всех изображений, а затем применить эту ширину кDiv и загрузить изображения, чтобы пользователь мог начать просматривать их?Или нужно полностью загрузить изображение, чтобы получить ширину?

Спасибо

Answer 1

Без дополнительной информации о ваших HTML-элементах и ​​о том, чего именно вы пытаетесь достичь, сложно дать больше советов, но вот первый укол:

Javascript - это сценарии на стороне клиента, по сути, если в вашем браузере нет информации, в javascript нет. Таким образом, чтобы обойти это, вы могли бы изначально скрыть изображения или их контейнер и в цикле показывать их одно за другим, когда функция выполняется для каждого изображения - таким образом, вычисления выполняются до того, как изображение показывается, но пользователь чувствует, что они получают более мгновенный ответ.

Answer 2

Браузер знает размер изображения, когда оно загружено.
Вы можете поместить их в скрытый блок, вычислить размеры и затем отображать их один за другим.Может быть, это сработает для вас.