jQuery $("img").load non-cache

이미지의 원본 크기를 구하기 위해서 $("img").get(0).naturalWidth 이나 naturalHeight 를 변수에 초기화했을때, 0 값이 떨어진다. 이러한 현상을 막기 위해서

 

$("img").load(function(){

var img = {
  width:$(this).get(0).naturalWidth,

  height:$(this).get(0).naturalHeight

});

 

등으로 사용할 수 있다. 그런데 여기서 load 된 값이 캐슁처리되면서 더이상 load가 실행되지 않는다.

이때 아래와 같은 방법으로 대응가능하다.

 

$("img").one("load",function(){

var img = {
  width:$(this).get(0).naturalWidth,

  height:$(this).get(0).naturalHeight

}).each(function(){

if(this.complete){

$(this).trigger("load");

}

});

 

예를 들어 문서가 로드된 상태에서 이미지 목록이 갱신 되었을 때 해당 목록에 있는 이미지들의 원본값을 배열에 초기화하고 싶을때 사용될 수 있겠다.