Question

我发现在我的网页的<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)之前是否有更简单的方法确保页面已完成加载？

Answer 1

使用承诺：

var promise = $.get('{{jsonDataUrl}}');

$(function() {
    promise.done(function(data) {
        foo(data);
    });
});

来自jquery doc：

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

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

1 个答案: