2

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

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"";>
}

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

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

4

1 回答 1

1

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

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 中。

于 2013-02-09T15:06:03.233 回答