加载程序，它也显示网页的加载百分比

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

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

来源

2013-02-09 Ishpreet

你想展示的百分比是多少？ loaded_piece /件，或loaded_MB/all_MB？你可以从另一个角度来看待这个问题，并通过AJAX调用加载所有的图像，这样你就可以保留加载过程的一小部分，并且在加载完毕后将它们移动到位。 – kms 2013-02-09 14:50:40

整个网页的加载百分比。 – Ishpreet 2013-02-09 14:54:53

在这种情况下，您必须计算服务器端的所有图像大小，并且如果可能的话，还要添加html大小。在加载页面时使用ajax调用加载图像（最好是使用jQuery，并且可以在每个图像上[听取加载的事件]（http://api.jquery.com/load-event/）），一个接一个，并且当您询问下一张照片时，您还会将服务器上的百分比值与下一张图片的网址一起传回。然后听取加载的事件，并进入循环，直到您达到100％ – kms 2013-02-09 15:02:20

一个简单的解决方案，只是计算图像的数量，并没有考虑到的图像的大小可能会像（只是一个简单的例子...）：

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-09 15:06:03 jeroen

el.find（“img”）。length中的'length'是什么意思？ – Ishpreet 2013-02-09 15:11:14

@X Phoenix'el。 find（“img”）'查找所有图像，'length'会给你找到的图像总数 – jeroen 2013-02-09 15:12:28

而且当你怀疑浏览器的支持是真的时（请告诉我我可以测试） – Ishpreet 2013-02-09 15:13:00

加载程序，它也显示网页的加载百分比

回答

相关问题