题
搜索js脚本,其中会显示一些消息(类似<!>“;正在加载,请等待<!>”;)直到页面加载所有图片强>
重要 - 它不能使用任何js框架(jquery,mootools等),必须是普通的js脚本。
加载页面时,消息必须消失。
解决方案
是老派的问题! 这可以追溯到我们过去预装图像的那些日子......
无论如何,这里有一些代码。神奇的是<!>“完整的<!>”; document.images集合上的属性(图像对象)。
// setup a timer, adjust the 200 to some other milliseconds if desired
var _timer = setInterval("imgloaded()",200);
function imgloaded() {
// assume they're all loaded
var loaded = true;
// test all images for "complete" property
for(var i = 0, len = document.images.length; i < len; i++) {
if(!document.images[i].complete) { loaded = false; break; }
}
// if loaded is still true, change the HTML
if(loaded) {
document.getElementById("msg").innerHTML = "Done.";
// clear the timer
clearInterval(_timer);
}
};
当然,这假设你在某个地方抛出了一些DIV:
<div id="msg">Loading...</div>
其他提示
只需向页面添加静态<div>
,通知用户该页面正在加载。然后添加window.onload
处理程序并删除div。
您应该对图像执行async ajax请求,并在完成后添加回调。
这里有一些代码来说明它:
var R = new XMLHttpRequest();
R.onreadystatechange = function() {
if (R.readyState == 4) {
// Do something with R.responseXML/Text ...
stopWaiting();
}
};
理论上,你可以在每个运行一个函数的图像对象上有一个onload事件,该函数检查是否所有图像都已加载。这样你就不需要#!>#180;需要一个setTimeOut()。但是如果图像没有<!>#180;那么这将会失败,因此您也必须考虑到错误。
不隶属于 StackOverflow