0

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

在我看来，步骤如下：

第 1 步：将图像加载到缓存中的函数。如果加载了图像，脚本将返回并返回原始大小。

第 2 步：在第 1 步完成后，第二个功能首先为目标 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 尝试了它，当元素已经存在时我使用它。但在这种情况下，我找不到正确的方法来获得我想要的结果。谁能给我正确的推动？

4

1 回答 1

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) 知道原始大小，因为我可以准备 div 大小。

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

于 2013-10-22T15:14:31.607 回答