Question

搜索js脚本，其中会显示一些消息（类似于“正在加载，请稍候”），直到该页面加载所有图片。

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

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

Answer 1

是老派的问题！这可以追溯到我们过去预装图像的那些日子......

无论如何，这里有一些代码。神奇的是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>

Answer 2

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

顺便说一下，这是什么原因？用户的浏览器中是否已经有页面加载指示符？

Answer 3

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

var R = new XMLHttpRequest();
R.onreadystatechange = function() {
  if (R.readyState == 4) {
    // Do something with R.responseXML/Text ...
    stopWaiting();
  }
};

Answer 4

理论上，你可以在每个运行一个函数的图像对象上有一个onload事件，该函数检查是否所有图像都已加载。这样你就不需要setTimeOut（）了。但是，如果图像没有加载，则会失败，因此您也必须考虑到错误。

正在加载消息

4 个答案: