-6

搜索一个 js 脚本，它会显示一些消息（例如“正在加载，请稍候”），直到页面加载所有图像。

重要 -它不能使用任何 js 框架（jquery、mootools 等），必须是普通的 js 脚本。

加载页面时消息必须消失。

4

4 回答 4

2

是的，一个老派的问题！这可以追溯到我们用来预加载图像的那些日子......

无论如何，这里有一些代码。神奇的是 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>
于 2009-06-23T07:54:30.710 回答
2

只需向页面添加一个静态<div>，通知用户页面正在加载。然后添加window.onload处理程序并删除 div。

BTW，这是什么原因？用户不是已经在他们的浏览器中设置了页面加载指示器吗？

于 2009-06-23T08:07:28.483 回答
0

您应该对图像执行异步 ajax 请求，并在完成后添加回调。
这里有一些代码来说明它： 

var R = new XMLHttpRequest();
R.onreadystatechange = function() {
  if (R.readyState == 4) {
    // Do something with R.responseXML/Text ...
    stopWaiting();
  }
};
于 2009-06-23T07:52:30.587 回答
0

从理论上讲，您可以在每个运行检查所有图像是否已加载的函数的图像对象上都有一个 onload 事件。这样你就不需要 setTimeOut()。但是，如果图像未加载，这将失败，因此您还必须考虑 onerror。

于 2009-06-23T08:05:06.303 回答