Lea*_*yes 1 javascript ajax jquery html5
我发现在<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);
});
});
来自jquery doc:
这允许您在单个请求上分配多个回调,甚至在请求完成后分配回调.(如果请求已经完成,则立即触发回调.)