Немедленно запустить AJAX-запрос, но убедиться, что страница загружена перед добавлением элементов?

#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 не позволит мне принять сразу) еще раз спасибо!!