jQuery在緩存中預加載圖像並在其他功能繼續之前獲取原始圖像大小

Question

當某人點擊縮略圖時，我想在div中顯示真正的全尺寸圖像。我想在加載圖像之前通過src（url）知道原始大小，因爲我可以準備div大小。其他好處是，我可以讓圖像緩慢顯示，並且如果圖像比包裝器大，我可以設置圖像大小以使其適合漂亮。

在我看來這是步驟：將圖像加載到緩存功能：

第1步。如果圖像已加載並返回原始大小，則腳本返回。

第2步：第一步完成後，第二個函數開始給目的div分配合適的尺寸，其他元素通過計算得到尺寸。

第3步：其顯示圖像的時間。

$('#img_full_size').show('slow'); 

比如我的嘗試：

function load_and_original_size() 
{ 
var image; 

function onload() 
    { 
    window.img_original_height = image.height; 
    window.img_original_width = image.width; 
    } 

image = new Image(); 
image.src=array_img_src[index_of_clicked_thumbnail]; 

if (image.complete) 
    { 
    onload(); 
    } 
    else 
    { 
    image.onload = onload; 
    } 
} 

這個腳本不能正常工作。我也試過用插件imagesLoaded當我使用一個元素的時候已經存在。但在這種情況下，我無法找到正確的方式來獲得我想要的結果。誰能給我正確的推動力？

Answer 1

設置src之前始終綁定onload。它還會產生更清晰的代碼。

function load_and_original_size() { 
    var image; 

    function onload() { 
     window.img_original_height = image.height; 
     window.img_original_width = image.width; 
    } 

    image = new Image(); 
    image.onload = onload; 
    image.src = array_img_src[index_of_clicked_thumbnail]; 

} 

---

我想知道由src（URL）的原始尺寸之前的圖像加載，因爲我可以再準備股利大小。

這是不可能的，如果沒有服務器給你的尺寸，你必須預加載它，並獲得它的寬度/高度與上述方法。