立即启动AJAX请求，但在添加元素之前确保页面已经加载

Start AJAX request immediately but ensure page has loaded before adding elements?

本文关键字：确保 加载 元素 添加 AJAX 启动 请求      更新时间：2023-09-26

我发现在网页的<head>部分提交AJAX请求可以避免页面加载时的微小闪烁(其中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)之前页面已经完成加载?

使用承诺:

var promise = $.get('{{jsonDataUrl}}');
$(function() {
    promise.done(function(data) {
        foo(data);
    });
});

From jquery doc:

这允许您在单个请求上分配多个回调，甚至可以在请求完成后分配回调。(如果请求已经完成，则立即触发回调)

相关文章：