Chrome AJAX при загрузке страницы заставляет "занятый курсор" оставаться

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

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

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

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

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

Ответ 1

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

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

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

Итак, если вы уверены, что на вашей странице есть только изображения, сценарии и фреймы, 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...

Ответ 2

Update

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

Update

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

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

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

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

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

Try:

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

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

Ответ 3

Существует супер простое, безупречное решение:

Оберните свою функцию в вызове 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);
});

Ответ 4

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

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

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

Изменить: hasnt forked jsfiddle > <

Ответ 5

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

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

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

Ответ 6

Похоже, что это проблема Chrome, и они не решают ее:https://bugs.chromium.org/p/chromium/issues/detail?id=26723