자바스크립트 - 이미지 로딩, 이미지 사이즈 구하기
자바스크립트 / 2017. 3. 11. 23:30
이미지 로딩은 오래걸린다.
이미지 로딩이 완료될때까지 기다릴 수 도 없다. (블럭된다. 멈춘다)
Sleep, Delay 같은 기능이 없거나, 안된다.
그래서, 이미지 로딩할때, onload, onerror 기능이 있다.
onload는 이미지가 로딩되면 호출되는 함수이다.
이미지 로딩되기전에는 이미지 사이즈를 알 수 없다.
이미지의 크기 정보가 필요한 경우, 이미지가 미리 로딩되도록
html body내에 사용할 이미지를 미리 넣어놓고, 자바스크립트는 body 마지막에 넣는 방법도 있으나,
이미지가 로딩될때, 보여질 수 도 있고, 자바 스크립트 위치가 맨아래여야하며,
html내에 이미지 정보가 들어가므로, 트래픽이 조금 증가할 수 있다.
그래서, 이미지를 사용하기전에 미리 로딩하는 방법을 자바스크립트만으로 구현해 보았다.
원리는 간단하다.
사용할 이미지를 자바스크립트로 미리 로딩하고,
모든 이미지가 로딩되면, main함수를 호출하는 방법이다.
//사용할 이미지 미리 로딩하기
pre_load_img_str_arry(["img/1.PNG","img/2.PNG","img/3.PNG"]);
//메인함수
function main()
{
pre_load_img_delete();
...
}
소스
---------------------------------------------------------------
//이미지 로딩시간이 오래걸려, 로딩이 완료될때까지 기다릴 수 없다.(Sleep, Wait등의 함수 기능 사용불가)
//여러장의 이미지를 미리 로딩하고, 로딩이 완료되면, main함수를 호출하도록 한다.
var pre_load_img_data={img:[],i:0,ok_cnt:0,err_cnt:0};
function pre_load_img_inc_cnt()
{
pre_load_img_data.ok_cnt++;
console.log("pre_load_img_data.ok_cnt=",pre_load_img_data.ok_cnt);
if(pre_load_img_data.ok_cnt==pre_load_img_data.i)
{
main();
}
}
function pre_load_img_onload()
{
console.log("pre_load_img_onload()");
console.log("this=",this);
console.log("this.src=",this.src);
pre_load_img_inc_cnt();
}
function pre_load_img_onerror()
{
console.log("pre_load_img_onerror()");
console.log("this=",this);
console.log("this.src=",this.src);
pre_load_img_data.err_cnt++;
console.log("pre_load_img_data.err_cnt=",pre_load_img_data.err_cnt);
pre_load_img_inc_cnt();
}
function pre_load_img_proc(imgurl)
{
console.log("pre_load_img_proc=",imgurl);
var a;
a=new Image();
a.onload=pre_load_img_onload;
a.onerror=pre_load_img_onerror;
pre_load_img_data.img[pre_load_img_data.i]=a;
pre_load_img_data.i++;
console.log("pre_load_img_data.i=",pre_load_img_data.i);
a.src=imgurl;
}
function pre_load_img_delete()
{
console.log("pre_load_img_delete");
while(pre_load_img_data.i--)
{
delete pre_load_img_data.img[pre_load_img_data.i];
}
}
function pre_load_img_str_arry(list)//list=["1.jpg",...]
{
var i,n;
n=list.length;
for(i=0;i<n;i++)
{
pre_load_img_proc(list[i]);
}
}
'자바스크립트' 카테고리의 다른 글
| 자바스크립트 - 스크립트 인클루드(include) 후, 갑자기 안되요 (0) | 2017.04.01 |
|---|---|
| 자바스크립트 - 문자열 배열 (0) | 2017.03.11 |
| 자바스크립트 - Uncaught SyntaxError: Invalid shorthand property initializer (0) | 2017.03.11 |
| 자바스크립트 - substr, slice 차이점 (0) | 2017.03.04 |
| 자바스크립트 - strcpy (0) | 2017.03.04 |