佔位符圖像圖像區域的大小？

Question

什麼是創建加載圖像代替.gif加載時的最佳方法？我想要一個約325x325（gif大小）的佔位符圖像來保存內容。

我已經嘗試過background：url（），但沒有看過JS/jQuery，因爲我不太熟練。

在此先感謝您的幫助。

Answer 1

如果您可以或想要使用jQuery，您可以使用onLoad函數來加載圖像並在加載後執行某些操作（如使用圖像替換加載gif）。

結帳this JSFiddle。它可讓您顯示立即加載的圖像以及需要加載1000毫秒的圖像。

這是如何完成的？看看下面的代碼：

var url="http://i.imgur.com/QoRjjFu.jpg", //the URL of the image to load 
    image=$("#some-image"),    //get the image element   
    newImage = new Image();    //create a new image 

//this is called after the image loads 
newImage.onload = function(){ 
    image.attr('src', url).show(); //swap out the loading gif 
}; 

//this triggers loading the image, which will trigger onload above when done 
newImage.src = url; 

現在，如果圖像加載快，你不想快速閃爍的加載GIF，然後在切換新的圖像（因爲它會導致一個閃爍效果）。你想跳過加載gif，只顯示圖像。您可以通過使用超時，只顯示加載GIF，比方說如果新的圖像沒有加載，200ms的做到這一點：

var url="http://i.imgur.com/QoRjjFu.jpg", 
    image=$("#some-image"), 
    newImage = new Image(); 

newImage.onload = function(){ 
    clearTimeout(loadingGif); //clear the loading gif timeout 
    image.attr('src', url).show(); 
}; 

//if the image hasn't loaded after 200ms, show the loading gif 
var loadingGif = setTimeout(function(){ 
    image.show(); 
}, 200); 

newImage.src = url; 

我希望這有助於！