我有一個ajax Web應用程序，每隔10秒我就向服務器請求內容。服務器發回帶有圖像鏈接的HTML。現在，我將div標記的innerHTML設置爲從服務器返回的HTML，它會動態更新網頁而無需重新加載整個頁面。然而，在設置innerHTML導致應用程序看起來很時髦和緩慢之後，圖像分別加載。如何在後臺加載圖像，然後在完成時顯示頁面？

如何準備好所有圖像，然後在擁有所有資源時交換innerHTML？

來源

2012-07-24 user605957

屬性（或數據屬性）添加到的DOM圖像，然後與j查詢偵聽「已加載」事件將加載的屬性更改爲true。然後驗證隊列中是否有靜止圖像，如果不是執行完整進程的回調。

標記：

<img src="img/1.png" class="imgToLoad" loaded="false" /> 
<img src="img/2.png" class="imgToLoad" loaded="false" /> 
<img src="img/3.png" class="imgToLoad" loaded="false" /> 
<img src="img/4.png" class="imgToLoad" loaded="false" />

僞代碼：

function allImagesLoaded(){ 
     $('#yourmaindiv').show(); 
     console.log('images loaded!'); 
    } 
    $('img.imgToLoad').load(function(){ 
     $(this).attr('loaded', 'true'); 
     if($('img.imgToLoad[loaded=false]').length === 0){ 
     allImagesLoaded(); 
     } 
    });

來源

2012-07-24 20:18:51

+1：'=== 0'是不必要的。 – naveen 2012-07-24 20:54:55

這可能是不必要的，但我補充說，因爲更具可讀性和自我解釋性。但是，數字0的計算結果爲假布爾值，因此與零比較是相同的，而不是僅評估長度值。 – 2012-07-24 20:58:13

爲你的形象：

的JavaScript

$(function() { 
    preload(); 

    function preload() { 
     var imageObj = new Image(), 
      images = []; 

     images[0] = 'img/1.png'; 
     images[1] = 'img/2.png'; 
     images[2] = 'img/3.png'; 
     images[3] = 'img/4.png'; 
     images[4] = 'img/5.png'; 

     for (var i = 0; i < images.length; i++) { 
      imageObj.src = images[i]; 
     } 
    } 
});

HTML

<body> 
    .... 

    <!--[if IE]> 
     <div id="preload"> 
      <img src="img/1.png" width="1" height="1" alt="" /> 
      <img src="img/2.png" width="1" height="1" alt="" /> 
      <img src="img/3.png" width="1" height="1" alt="" /> 
      <img src="img/4.png" width="1" height="1" alt="" /> 
      <img src="img/5.png" width="1" height="1" alt="" /> 
     </div> 
    <![endif]--> 
</body>

CSS爲IE

#preload { 
    position: absolute; 
    overflow: hidden; 
    left: -9999px; 
    top: -9999px; 
    height: 1px; 
    width: 1px; 
}

來源

2012-07-24 20:06:08

OP標籤jQuery的一樣，所以你可以使用'$（文件）。就緒（函數（）{預緊（）}）'而不是'onload'屬性。更少的HTML修改。 – DACrosby 2012-07-24 20:17:20

我已考慮過您的評論。 – 2012-07-24 20:22:45

如何在後臺加載圖像，然後在完成時顯示頁面？

回答

的JavaScript

HTML

CSS爲IE

相關問題