JQuery ведет себя странно после обновления страницы (F5) в Chrome

У меня есть script, который отлично работает в FireFox, IE, но не в Chrome после обновления F5! Он работает в chrome, если я сосредоточу адрес url и нажимаю Enter, но он не работает, если я нажимаю F5, я вообще не понимаю его, как это может повлиять на код jQuery.

Итак, здесь script:

$(document).ready(function() {
    var width = 0;
    $('#gallery img').each(function() {
    width += $(this).outerWidth(true);
    });

    $('#offer #gallery').css('width', width + 'px');
});

И результат Width должен быть 820, но я получаю это только в том случае, если обновляю сайт, сфокусировав адрес URL и нажав enter, иначе он даст результат 90.

Я попытался перезапустить браузер и удалить кеш, поэтому проблемы нет, какие-либо идеи?

Ответ 1

Чтобы исправить эту проблему, используйте:

$(window).load(function() {});

Out вместо:

$(document).ready(function() {});

Ответ 2

Я предполагаю, что это происходит из-за того, что изображения еще не загружены, когда событие ready() запущено, а 18px - это размер значка-заполнителя для изображений. Нажатие клавиши F5 приводит к перезагрузке всех ресурсов на странице, в то время как обычная навигация отсутствует.

Вы можете попробовать заменить вызов ready() вызовом load() или предоставить атрибуты ширины и высоты в ваших тегах img, чтобы их размер был известен до загрузки изображений.

Из JQuery API для .load():

Событие загрузки отправляется элементу когда он и все подэлементы были полностью загружен.

И из . ready():

Пока JavaScript предоставляет нагрузку событие для выполнения кода, когда страница, это событие не получается срабатывает до тех пор, пока все активы, такие как изображения были полностью получены. В большинстве случаев может выполняться scriptкак только иерархия DOM полностью построенный.

Ответ 3

У меня была аналогичная проблема, пытающаяся вызвать пользовательскую js-библиотеку. Я также использовал комбинацию jquery и jquerymobile.

Оба $(window).load(function() {}); и $(document).ready(function() {}); терпели неудачу. Использование:

$(document).on("pageinit", function () {});

решил мой случай.