html - 緩存

Question

我有一個網頁，其中有一個圖像。但圖像在打開頁面幾秒後加載。我想在圖像尚未加載時顯示加載gif，然後檢查圖像是否每隔2秒加載一次。一旦圖像被加載，我想用圖像替換加載gif。我寫了下面的代碼：

<script language="javascript" type="text/javascript"> 
     function checkImage(src) { 
      var img = new Image(); 
      img.onload = function() { 
       // code to set the src on success 
       $('#img1').attr('src', 'imageOriginal.jpg'); 
       $('#img1').removeAttr('width'); 
       clearInterval(interval); 
      }; 
      img.onerror = function() { 
       countErrors = countErrors + 1; 
      }; 

      img.src = src; // fires off loading of image 
     } 
     var interval; 
     var countErrors = 0; 
     $(document).ready(function() { 
      $('#img1').attr('width', '620px'); 
      interval = window.setInterval(function() { checkImage('imageOriginal.jpg?id=' + countErrors); }, 2000); 
     }); 
    </script> 

       <img borderstyle="solid" bordercolor="black" borderwidth="1px" id="img1" alt="Screenshot" style="max-width:620px;" src="loading.gif" /> 

它有時會起作用，有時不起作用。我甚至添加了一個ID參數來防止緩存。但即使圖像已經加載，也會顯示加載gif。我該如何解決這個問題？

Answer 1

如果jQuery涉及您的腳本，我已經看到它完成的一種方法是通過附加一個onload事件到圖像，類似於你在那裏，除了onload事件觸發圖像實際上加載。在此事件之後，您可以隱藏加載圖像。我認爲將加載圖像作爲自己獨立的圖像並根據主圖像是否加載隱藏/顯示會更有意義。

實施例：

$('#img1').load(function() { 
    $('#loadingImage').hide(); 
    $('#img1').show(); 
}); 

無需對的間隔此檢查。加載事件只需連接一次，並在圖像加載完成後可靠地啓動。

Answer 2

考慮添加一個浮動元素作爲佔位符與您的微調，並在img.load（而不是onload）隱藏您的浮動div。使用img.load將使您不必輪詢，並且使用浮動div可以減少在圖像之間轉換時感覺到的任何「打嗝」。分層它們也爲動畫過渡打開了大門。