加載程序，它也顯示網頁的加載百分比

我的網站上有一個加載程序，它在顯示任何文本，圖片和其他內容之前加載網頁的所有照片。所以我把背景，主包裝（帶有設計）等代碼以及頁面中的所有圖像（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

加載程序，它也顯示網頁的加載百分比

回答

相關問題