블로그 이미지
안녕1999

카테고리

전체 (3067)
자바스크립트 (20)
안드로이드 (14)
WebGL (4)
변비 (17)
정치,경제 (35)
C언어,ARM (162)
컴퓨터(PC, Note Book, 윈.. (41)
전자회로, PCB (27)
유머,안웃긴,GIF,동영상 (118)
국부론60 (71)
모듈(PCB) (3)
건강 (2)
FreeCAD (25)
PADS (43)
퇴직,퇴사,구직,취업 활동 (3)
C# (86)
엑셀 (8)
워드 (0)
LabView (6)
레고 (30)
FPGA (0)
Total
Today
Yesterday

달력

« » 2024.5
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

공지사항

최근에 올라온 글

자바스크립트에서, onload()같은 콜백함수에 인자(파라메터)를 넘기는 방법에 대해 테스트해보았다.

C언어와 동작방식이 달라서, 어렵다.

결론 : 아래와 같이 작성한 경우, onload()함수를 호출한 곳의 파라메터 및 지역변수까지 모두 보존된다.(호출이 끝날때까지)

테스트환경 : 크롬브라우져

var test_parm,test_url,test_i=0;
function test_print_parm1(i)
{
	console.log("test_print_parm1()--------",i);
	console.log("test_parm=",test_parm);
	console.log("test_url=",test_url);
	console.log("test_i=",test_i);
	console.log("--------");
}
function test_call_back(url,parm)
{
	var i=10,a=new Image();
	i++;
	//a.onload=onload;
	a.onload=function()
	{
		console.log("test_call_back::onload()");
		test_parm=parm;//지역변수, 파라메터, 모두 보존된다. 헐~
		test_url=url;
		test_i=i;
		test_print_parm1(i);
	};
	a.src=url;
	return a;
}
var test_img,parm1,parm2;
parm1="img/k81.JPG";
parm2="test_parm";
test_img=test_call_back(parm1,parm2);
console.log("test_call_back() end1");
test_print_parm1(1);
parm1="xxx1";
parm2="xxx2";
test_print_parm1(2);

parm1="img/j2.JPG";
parm2="test_parm2";
test_img=test_call_back(parm1,parm2);
console.log("test_call_back() end2");
test_print_parm1(3);
parm1="xxx11";
parm2="xxx22";
test_print_parm1(4);


Posted by 안녕1999
, |

이미지 로딩은 오래걸린다.

이미지 로딩이 완료될때까지 기다릴 수 도 없다. (블럭된다. 멈춘다)

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]);
}
}


Posted by 안녕1999
, |

최근에 달린 댓글

글 보관함