イメージをページにロードする前に、jQueryでイメージの幅と高さを計算するにはどうすればよいですか？

Question

私はを知っているので、私はこれに対して壁に頭を叩いています。私はこれまでにやったことがあります。しかし、このコードは動作しません。さて、私はそれがすぐに一緒に投げようとしているので、これが混乱であることは分かっています（それをうまく働かせ、速くするなど）。

私は、次の基本的なHTMLがあります、リンクのクリックを傍受ミニギャラリー（次、前、アクティブなど）を介して状態を維持するためのオブジェクトを作成し、計算する

<div class="js-gallery force js-on"> 
    <h5>More Images &raquo;</h5> 
    <a href="http://url/to/image1.jpg"><img src="http://url/to/image_thumb1.jpg" alt=""></a> 
    <a href="http://url/to/image2.jpg"><img src="http://url/to/image_thumb2.jpg" alt=""></a> 
    <a href="http://url/to/image3.jpg"><img src="http://url/to/image_thumb3.jpg" alt=""></a> 
     etc... 
</div> 

そして、次のJSを画面の幅/高さを調整してください。 SOシンプルでなければなりません：

// Set up intialized variables 
var overlay = $("<div class='gallery-overlay' id='gallery-overlay'></div>").hide().appendTo("body"), 
    state = {}, 
    galleryNext = $("<a class='gallery-next' href='#'>Next</a>"), 
    galleryPrev = $("<a class='gallery-prev' href='#'>Previous</a>"), 
    gallery = $(".js-gallery"); 

gallery.addClass("js-on"); 

gallery.find("a").click(function (e) { 
    e.preventDefault(); 
    state.gallery = $(this).parent(".js-gallery"); 
    thisHref = this.href; 
    overlay.fadeIn(200, function() { 
    buildGalleryOverlay(thisHref); 
    }); 
    return false; 
}); 

$("#gallery-overlay").live("click", function (e) { 
    overlay.fadeOut(); 
    overlay.find("#image-box").remove(); 
}); 

$("#image-box a").live("click", function (e) { 
    var imageBox = $("#image-box"); 
    imageBox.fadeOut().remove(); 
    buildGalleryOverlay(this.href); 
    return false; 
}); 

function buildGalleryOverlay(clickedHref) { 
    var ww = $(window).width(), 
    wh = $(window).height(), 
    imageBox = $("<div class='image-box' id='image-box'></div>").appendTo(overlay).show(), 
    image = $("<img src='" + clickedHref + "' />"), 
    iw, oldW, 
    ih, oldH, 
    overWidth, overHeight, 
    allImages; 

    window.console.log(imageBox); 

    if (!state.total) { 
    state.total = 0; 
    state.images = []; 
    allImages = $(state.gallery).find("a"); 
    $.each(allImages, function (index, value) { 
     state.total += 1; 
     state.images.push(value.href); 
    }); 
    } 

    state.active = state.images.indexOf(clickedHref); 
    state.next = state.images[state.active + 1]; 
    state.prev = state.images[state.active - 1]; 

    image.appendTo(imageBox); 
    window.console.log(image); 
    iw = $(image).width(); 
    ih = $(image).height(); 

    // continued... 

右ここで問題が発生したところ、すべてがそう頻繁に画像リンクをクリックし、幅と高さを0と0を返しますので、です。理由は分かりません。そして、それが起こるとき、スクリプトが動作しない（CSSは、width: 0に設定height: 0 -or、私はそれをオフにした場合、これらの画像は、画面には大きすぎますされている場合、画像が隠れます）：

window.console.log(iw); 
    window.console.log(ih); 

    overWidth = iw - ww; 
    overHeight = ih - wh; 

    if (overWidth > 0 || overHeight > 0) { 
    if (overWidth > overHeight) { 
     // Landscape 
     oldW = iw; 
     iw = ww - 80; 
     ih = (iw * ih)/oldW; 
    } 
    else { 
     // Portrait 
     oldH = ih; 
     ih = wh - 160; 
     iw = (ih * iw)/oldH; 
    } 
    } 

    galleryPrev = galleryPrev || $("<a href='##' class='gallery-prev'>Previous</a>"); 
    galleryNext = galleryNext || $("<a href='##' class='gallery-next'>Next</a>"); 

    galleryPrev.attr("href", (state.prev || state.images[state.images.length - 1])).appendTo(imageBox); 
    galleryNext.attr("href", (state.next || state.images[0])).appendTo(imageBox); 


    // Here I've turned off the CSS adjustments because iw and ih were getting 0s 

    if (iw && iw > 0 && ih && ih > 0) { 
    image.css({width: iw + "px", height: ih + "px"}); 
    imageBox.css({width: iw + "px", height: ih + "px"}); 
    } 

} 

}); 

Answer 1

http://www.javascriptkit.com/jsref/image.shtml

サーバーからロードされていないイメージのサイズは計算できませんが、Image（）オブジェクトを使用してJSを使用してイメージをロードし、必要な計算を得ることができますそのイメージをページに実際に挿入する前に完了します。

Answer 2

個人的には、GDを使ってサーバーにあるイメージのサイズを取得し、JavaScriptに結果を返すAJAXメソッドを呼び出すだけでPHPスクリプトを作成します。ページに画像が読み込まれることはありません。画像の幅/高さのために画像を除外/修正する必要がある場合に有効です。

単なる考えです。