我发现在 <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)之前，有没有更简单的方法来确保页面已经完成加载？ ？
最佳答案
使用 promise :
var promise = $.get('{{jsonDataUrl}}');
$(function() {
promise.done(function(data) {
foo(data);
});
});
来自 jquery 文档:
This allows you to assign multiple callbacks on a single request, and even to assign callbacks after the request may have completed. (If the request is already complete, the callback is fired immediately.)
关于javascript - 立即启动 AJAX 请求但在添加元素之前确保页面已加载？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24275867/