페이지에 이미지를로드하기 전에 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 간단해야한다 : 문제가 발생하는 경우 이미지 링크에 모든 너무 자주 클릭이 폭과 높이를 0과 0을 반환하기 때문에 바로 여기

// 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... 

가있다. 이유는 모르겠다.

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

: 그런 일이 때, 스크립트합니다 (CSS는 width: 0, height: 0로 설정되어있는 경우 이미지가 보이지 도착 - 또는 내가 그 전원을 끌 경우 다음 이러한 이미지가 화면에 너무 큰) 작동하지 않습니다 다음을보십시오 : http://www.javascriptkit.com/jsref/image.shtml

서버에서로드되지 않은 이미지의 크기는 계산할 수 없지만 Image() 객체를 사용하여 JS를 통해 이미지를로드하고 필요한 계산을 얻을 수 있습니다 이미지를 페이지에 실제로 삽입하기 전에 완료해야합니다.

Answer 2

저는 개인적으로 GD를 사용하여 서버에있는 이미지의 크기를 잡고 PHP로 결과를 JavaScript로 반환하는 AJAX 메서드를 통해 호출합니다. 페이지에 이미지를로드하지 마십시오. 너비/높이 때문에 이미지를 제외/수정해야 할 수도있는 특정 상황에서 유용 할 수 있습니다.

그냥 생각해보십시오.