javascript - jQuery 在缓存中预加载图像并在其他功能继续之前获取原始图像大小

Question

当有人点击缩略图时，我想在 div 中显示真实的全尺寸图像。我想在加载图像之前通过 src (url) 知道原始大小，因为这样我就可以准备 div 大小。其他好处是我可以让图像缓慢显示，而且如果图像比 wrapper 大，我可以设置图像大小以使其适合。

在我看来，这是步骤:

第 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 之前绑定(bind)到 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];

}

---

I want to know the original size by src (url) before the image is loaded because I can then prepare the div size.

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