Question

我的网站上有一个加载程序，它会在显示任何文本，图片和其他内容之前加载网页的所有照片。所以我把代码放在背景，主包装（带设计）等，以及页面中的所有图像（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 =“”;。

请告诉我一个方法，以便我也可以使用任何编码语言来判断加载的百分比。还请告诉我是否有更好的方法，但在告诉负载百分比时。

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

Loader，还显示网页加载的百分比

1 个答案: