Сценарий работает только на перезагрузке страницы

Question

Я использую jQuery для выравнивания изображений на веб-сайте с горизонтальным видом, но скрипт работает только при перезагрузке страницы.

http://joliannelm.steveforest.com/edition/roux-de-service.html

Скрипт вызывается непосредственно перед

Это сценарий:

$(document).ready(function() { 

    var width = 0; 

    $('#page img').each(function() { 
     width += $(this).outerWidth(true); 
    }); 

    $('#page').css('width', width + 50); 

}); 

Когда страница перезагружается это нормально, но если очистить кэш, он вернулся .. .

Кто-то знает почему? Благодарю.

Answer 1

Это, вероятно, проблема времени: событие ready запускается, когда DOM готов - это может быть до загрузки изображений. Поскольку вы не даете изображениям фиксированные атрибуты width, вам нужно, чтобы они были загружены, прежде чем вы сможете рассказать их ширину.

Здесь load event является наиболее подходящим триггером.

$(window).load(function() { ... your code here 

в отличие от ready, load будет ждать всех связанных с ними файлов - изображения, таблицы стилей, файлы JavaScript и т.д.