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

Question

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

Итак, вот сценарий:

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

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

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

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

Answer 1

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

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

Out вместо:

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

Answer 2

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

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

From JQuery API для .load () :

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

И из .ready () :

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

Answer 3

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

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

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

раскрыло мое дело.