Loader，它还显示网页的加载百分比 - Loader which also shows the percent loaded for webpage

Loader which also shows the percent loaded for webpage

我的网站上有一个加载程序，它在显示任何文本、图片和其他内容之前加载网页的所有照片。因此，我将背景、主包装器（带设计）等的代码与页面中的所有图像（style="width:0;height:0;visibility:hidden;"和其他使它们不可见的东西）一起放入。说完，我放了一句话，上面写着Loading。。。。。。。

HTML:

<body onLoad="load()">
<div class="main-wrapper" id="main-wrapper">
     <p>Loading.....</p>
</div>
<img src="xxxxx" class="hidden">
<img src="xxxxx" class="hidden">
<img src="xxxxx" class="hidden">
<img src="xxxxx" class="hidden">

Javascript：

function load()
{
document.getElementById('main-wrapper').innerHTML = "Text I Want <img src="x"";>
}

这使得我想要在加载所有图像后显示的文本。现在，我在.ninnerHTML="；中编写我想要的内容没有问题；。

请告诉我一种方法，这样我也可以告诉使用任何编码语言加载的百分比。还请告诉我是否有更好的方法，但同时告诉加载的百分比。

一个简单的解决方案，只计算图像的数量，而不考虑图像的大小，就像（只是一个简单例子…）：

function loadPage(html) {
  // html contains the html to add to #main-wrapper
  // put the html in an element to count the images in it
  var el = $("<div>").html(html);
  var imgCount = el.find("img").length;
  var count = 0;
  var percentage = 0;
  $("img", el).load(function() {
    count++;
    if (imgCount === count) {
      $("#main-wrapper").html(html);
    } else {
      percentage = (count / imgCount) * 100;
      $("#main-wrapper").html("loading ("+ percentage + "%) ...");
    }
  });
}

在加载图像之前很难获得图像大小；我最近没有尝试过，但以前很容易在firefox中获得尺寸，但不可能在例如webkit中获得。