2017-02-04 3 views
1

내가 가진 :첨부 된 이미지의 높이와 너비를 찾으십니까?

for(var i=1;i<10;i++){ 
    $('#vid_c_'+i).append('<div class="move_2" id="vd'+i+'"></div>'); 
    $('#vd'+i).append('<img class="class" id="id_'+i+'" src="'+_m[i-1]+'">'); 
    $("#id_"+i).load(function() { 
     var mv_pstimg = document.getElementById('id_'+i); 
     var width = mv_pstimg.clientWidth; 
     var height = mv_pstimg.clientHeight; 
     console.log(height +" "+width); 
    }); 
} 

콘솔 출력 : 참고로 Uncaught TypeError: Cannot read property 'clientWidth' of null

: 이미지가 나 또한 노력

브라우저에서 잘로드

$("img").one("load", function() { 
    var mv_pstimg = document.getElementById('id_'+i); 
    var width = mv_pstimg.clientWidth; 
    var height = mv_pstimg.clientHeight; 
    console.log(height +" "+width); 
}).each(function() { 
    if(this.complete) $(this).load(); 
}); 

같은 결과

답변

2

을 사용해야합니다.. 문제는 다음과 같습니다.

jQuery로드 기능은 asyncronous입니다.

.load에 전달 된 callback 함수는 이미지로드시에만 실행됩니다.

load 방법 콜백을 만들 때의 loopi 값보다 i 변수의 값이 아닌 닫히고을 만들에 대한 콜백 함수의 각

.

for(var i=1;i<10;i++){ 
    $('#vid_c_'+i).append('<div class="move_2" id="vd'+i+'"></div>'); 
    $('#vd'+i).append('<img class="class" id="id_'+i+'" src="'+_m[i-1]+'">'); 

    (function(index){ 
     $("#id_"+index).load(function() { 
      var mv_pstimg = document.getElementById('id_'+index); 
      var width = mv_pstimg.clientWidth; 
      var height = mv_pstimg.clientHeight; 
      console.log(height +" "+width); 
     }); 
    }(i)); 
} 
관련 문제