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）的原始尺寸之前的图像加载，因为我可以再准备股利大小。

这是不可能的，如果没有服务器给你的尺寸，你必须预加载它，并获得它的宽度/高度与上述方法。