JQuery와 .CSS() 문제 ... 도움

Question

난 당신이

$(document).ready(function(){ 
    //Dynamically size wrapper div based on image dimensions 
    $("#tag-wrapper").css({width: $("#show_img").outerWidth(), height: $("#show_img").outerHeight()}); 

    //Append #tag-target content and #tag-input content 
    $("#tag-wrapper").append('<div id="tag-target"></div><div id="tag-input"></div>'); 

아이디어 페이지가로드 될 때 CSS 속성은 즉시 적용해야한다는 것입니다에 대한 이러한 코드는 단지 시작 부분을 입력해야 바랍니다. 하지만 ... 페이지에 처음 들어가면 작동하지 않는 페이지를 새로 고칠 때 작동하지 않습니다. 어떤 생각을 어떻게 고칠 수 있습니까?

Answer 1

show_img의 너비와 높이가 설정된 경우 코드가 작동합니다. DOM이로드 될 때와 페이지 내용 앞에 $ (document) .ready가 호출되기 때문에 이것이 작동하지 않는 이유가 있다고 생각합니다. 그래서 그 시점에서 show_img은 아직로드되지 않았으므로 명시 적으로 설정하지 않으면 너비와 높이를 가져올 수 없습니다.

Answer 2

이미지는 당신이 폭과 높이를 취하려고 할 때 아마로드되지 않습니다, 그래서 당신은 실행하기 전에 모든 이미지가로드되는 것을 보장 할 문서의 load event에 함수를 바인드해야합니다 :

$(document).load(function() { 
    $('#tag-wrapper').css({ 
     width: $('#show_img').outerWidth(), 
     height: $('#show_img').outerHeight() 
    }).append('<div id="tag-target"></div><div id="tag-input"></div>'); 
});