Chrome AJAX при загрузке страницы приводит к тому, что «занятый курсор» остается

Question

В Google Chrome AJAX вызывается в пределах $ (function () {....});Кажется, продолжает загружать страницу.

У меня есть сайт с несколькими страницами с вкладками.Поскольку я использую дешевый хостинг Godaddy, я хочу, чтобы страница загружалась как можно быстрее.Поэтому я хочу загрузить страницу на 1 вкладке, а затем в фоновом режиме использовать AJAX для загрузки других вкладок.Когда я запускаю AJAX с

$(function(){
    /*AJAX CODE HERE */
});

Курсор показывает, что страница загружается в течение длительного времени (http://jsfiddle.net/mazlix/7fDYE/9/)

. Я нашел способ (по крайней мере, в Chrome) как-то это исправить.используя setTimeout(); (http://jsfiddle.net/mazlix/7fDYE/8/),, но это работает только в том случае, если вы правильно предсказываете, когда окно полностью загружается, и, очевидно, требует больше времени для загрузки. Мне нужен способ загрузки контента через AJAX сразу после загрузки страницы, поэтомупри ожидании возвращенного AJAX не отображается «занято-курсор».

Answer 1

Google Chrome отображает индикатор загрузки, если нет новых запросов к серверам.Пока отображается индикатор загрузки, все новые запросы заставляют Chrome увеличивать время отображения индикатора.Кроме того, когда нажата esc во время отображения индикатора, все запросы отменяются!К ним относятся запросы AJAX и даже запросы Flash!Посмотрите на этот вопрос : я думал, что это из-за Youtube, но это оказалось обычным поведением Chrome.

Единственный способ избежать «продления» времени - индикатор загрузки отображается, делает запросы после того, как индикатор загрузки скрыт : т.е. когда все запросы к серверу завершены. Документация JQuery on .load() гласит:

Событие загрузки отправляется элементу, когда он и все вложенные элементы полностью загружены.Это событие может быть отправлено любому элементу, связанному с URL: изображениям, сценариям, фреймам, iframes и объекту окна.

Итак, если вы уверены, что есть только изображения, сценарии икадры на вашей странице, window.load() будут запущены именно тогда, когда вам это нужно.Добавление setTimeout() будет работать так, как вам нравится.Вот пример: http://jsfiddle.net/7fDYE/22/

Если есть другие запросы, сделанные до вашего запроса , вам следует дождаться их завершения!Например, вы знаете, что кроме изображений / скриптов и т. Д. У вас есть еще 3 AJAX-запроса до загрузки страницы.У вас может быть что-то вроде этого:

var loaded=0,needsToBeLoaded=4; //3 AJAX + window
function onLoad(){
    loaded++;
    if(loaded==needsToBeLoaded){
         //do the AJAX request   
    }
}
window.load(onLoad);
// add onLoad() to all 3 AJAX request handlers

Я не уверен, что вы можете делать с Flash-запросами ...

Answer 2

Существует супер простое, надежное решение:

Оберните вашу функцию в вызове setTimeout и используйте интервал 0. Это поставит в очередь функцию, которая будет вызвана немедленно, но Chrome больше не будет ждать ее загрузки, прежде чем рассматривать страницу как завершенную. Вам НЕ нужно делать предположения о том, когда страница будет готова, просто убедитесь, что вы вызываете setTimeout из обработчика jquery Ready, например:

$(window).load(function() {
    setTimeout(function() {
        $("#result").html(ajax_load);
        $.post("/echo/json/", {json: json1, delay: 10000}, show_json, "json");
    }, 0);
});

Answer 3

Обновление

Это решение не будет работать для Chrome.Индикатор загрузки останавливается только после завершения всех запросов, выполненных до загрузки окна.Похоже, единственное решение состоит в том, чтобы заставить его выполнить запрос после загрузки окна, но, насколько я знаю, это возможно только с setTimeout, что не очень хорошо.

---

Обновление

Чтобы обойти проблему указателя в Chrome, вы можете установить стиль курсора, как показано в this fiddle .Это немного странно и не решает проблему с индикатором загрузки в верхней части вкладки.

---

Индикатор загрузки будет присутствовать в браузерах до тех пор, пока страница не загрузится (событие загрузки окна),В $(function(){someCode();});, someCode выполняется, когда запускается событие загрузки DOM (когда весь контент был проанализирован и вставлен в DOM до загрузки страницы).Выполнение JavaScript в этот момент блокирует событие загрузки окна от запуска и, таким образом, предотвращает останов индикатора загрузки.Обратите внимание, что загрузка изображения также блокирует событие загрузки окна.

Вместо этого вы можете попробовать $(window).load(function(){someCode();});.В этом примере someCode выполняется, когда запускается событие загрузки окна.Это в тот момент, когда индикатор загрузки браузера останавливается.

Итак, вместо:

$(function(){
    /*AJAX CODE HERE */
});

Попробуйте:

$(window).load(function(){
    /*AJAX CODE HERE */
});

Обратите внимание, что это может вызвать ваш JavaScriptначать выполнение позже, что может быть нежелательно.

Answer 4

Согласно документации JQuery, никакой javascript не должен запускаться до готовности, например,

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

, имея в виду, что я изменил jsFiddle (загрузка занимает некоторое время, но работает)

Редактировать: не разветвляли jsfiddle> <</p>

Answer 5

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

Это может быть делом личного вкуса (мне нравится, когда браузер указывает, что он ждет / работает, даже если он заставляет мой браузер работать медленно), и в этом случае удается «исправить» эту «проблему»,заставит браузер вести себя не так, как раньше.В веб-разработке вы действительно не должны пытаться заставить браузер вести себя особым образом, который не важен для работы веб-приложения, потому что вы, скорее всего, в конечном итоге добьетесь того, чтобы его выглядело так, как вы используете.в другую операционную систему с другим ощущением, заставляя ее чувствовать себя более чужой для пользователей другой операционной системы (даже если она делает сайт более естественным для вас).

Занятый курсор в любом случае не является проблемой, потому чтоэлементы уже загружены, все еще реагируют.