我的网站上有一个加载程序，它在显示任何文本、图片和其他内容之前加载网页的所有照片。所以我将背景代码、主包装器(带有设计)等与页面中的所有图像一起放置 (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="";中写我想要的内容没有问题了。
请告诉我一种方法，这样我也可以使用任何编码语言来判断加载百分比。还请告诉我是否有更好的方法来做到这一点，但要告诉我加载的百分比。
最佳答案
一个简单的解决方案，只计算图像的数量而不考虑图像的大小(只是一个简单的例子......):
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 中获取它们。
关于php - 加载程序，它还显示网页加载的百分比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14789230/