0

誰かがサムネイルをクリックすると、実際のフルサイズの画像を div に表示したいと考えています。画像を読み込む前にsrc(url)で元のサイズを知りたいです。他の利点は、画像をゆっくりと表示できることと、画像がラッパーよりも大きい場合は、画像サイズを設定してうまく収まるようにすることができることです。

私の意見では、これは次の手順です。

ステップ 1:画像をキャッシュにロードする関数。スクリプトは、画像がロードされているかどうかを返し、元のサイズを返します。

ステップ 2:ステップ 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 で試しました。しかし、この場合、私が望む結果を得るための正しい方法を見つけることができません。誰が私に正しいプッシュを与えることができますか?

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)で元のサイズを知りたいです。

サーバーから寸法を取得しないと、これは不可能です。事前にロードして、上記の方法で幅/高さを取得する必要があります。

于 2013-10-22T15:14:31.607 に答える