#javascript #jquery #ajax #html
#javascript #jquery #ajax #HTML
Вопрос:
Я обнаружил, что отправка AJAX-запроса во время <head>
раздела моей веб-страницы позволяет избежать крошечного мерцания при загрузке страницы (когда загруженный AJAX контент внезапно добавляется при загрузке). Понятно, что это все еще нуждается в доработке для улучшения внешнего вида, когда AJAX-запрос занимает больше времени, но по большей части это уже будет внутри кэша браузера посетителей.
Пример:
<!DOCTYPE html>
<html lang="en">
<head>
...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$.get('{{jsonDataUrl}}', function(data) {
foo(data);
});
</script>
Хотя, похоже, это работает правильно, я обеспокоен тем, что ответ AJAX может вернуться до завершения загрузки страницы. Концептуально я считаю, что потребуется что-то вроде следующего:
$.get('{{jsonDataUrl}}', function(data) {
// AJAX data received, wait until page has finished loading...
var id = setInterval(function() {
if (window.hasPageLoaded === true) {
clearInterval(id);
foo(data);
}
}, 0);
});
$(document).ready(function() {
window.hasPageLoaded = true;
});
Есть ли более простой способ убедиться, что страница завершила загрузку перед выполнением foo(data)
?
Ответ №1:
Используйте обещание:
var promise = $.get('{{jsonDataUrl}}');
$(function() {
promise.done(function(data) {
foo(data);
});
});
Из документа jquery:
Это позволяет вам назначать несколько обратных вызовов для одного запроса и даже назначать обратные вызовы после завершения запроса. (Если запрос уже завершен, обратный вызов выполняется немедленно.)
Комментарии:
1. Работает как шарм! Я приму через 6 минут (потому что StackOverflow не позволит мне принять сразу) еще раз спасибо!!