2010-02-22 7 views
2

너비를 가져 오려고하는 페이지에 이미지가 있습니다.width()가 값을 반환하지 않음

<img class="zoomerIcon" src="zoomer.png" /> 

그래서이 너비를 얻으려고합니다.

var imageWidth = $('.zoomerIcon').width(); 

I 태그의 폭 속성을 설정하지 않는 값이 0 그러나

.

width()는 속성에 수동으로 설정된 경우 0보다 큰 너비 만 반환합니까? 여기에서 전체 스크립트를 볼 수 있습니다.

http://www.wantedcreative.com/development/zoomer/index.html

감사

+2

자바 스크립트와 이미지의 문제들이 이미지 다운로드 될 때까지 경계를 알 수 없다는 것입니다. 일단 이미지로드가로드되면 알아낼 수있는 .load 함수를 사용할 수 있습니다. – amphetamachine

답변

1

업데이트

죄송합니다는, 당신의 소스 에보고해야합니다. 다음은 코드를 변경해야하는 방법입니다. 중요한 점은 이미지가 완전히로드 될 때까지 너비를 얻을 수 없다는 것입니다.

// Create the img element, add a load handler, then append it to the body 
var $img = $('<img class="zoomIcon" alt="zoom icon" />').load(function(e){ 
    // get icon image properties for use with animation 
    var imageWidth = $(this).width(); 
    var imageHeight = $(this).height(); 

    // ... any code that uses these variables needs to go in here ... 

}).attr('src', zoomImage).appendTo(document.body); 

원래 답 : :이 일반적인 정보입니다 내가 너비를 검색 할 load 이벤트 콜백을 사용하는 이유입니다.

이 코드를 document.ready에 넣으면 이미지가로드되기 전에 너비를 검색하려고합니다. 대신이 시도 :

$(window).load(function(){ 
    var imageWidth = $(".zoomer").width(); 
    alert(imageWidth); // Should be correct 
}); 
+0

덕 (Doug). 이상한 점은 파이어 폭스에서 원래 스크립트가 작동하는 것 같습니다. Safari가 너비를 찾을 수없는 것 같습니다. 무엇이 원인인지에 대한 의견이 있으십니까? – acreek

+0

로컬에서 테스트 했습니까? Firefox의 캐싱은 'width'코드가 실행되기 전에 이미지를로드 할만큼 빠릅니다. 별로 모르겠다. –

관련 문제