Image Object

ํŒจ์…˜์ด๋ฏธ์ง€ ์ถ”์ฒœ์„œ๋น„์Šค๋ฅผ ๊ตฌํ˜„ํ•  ๋‹น์‹œ ์ด๋ฏธ์ง€ ๋กœ๋”ฉ์ด ์™„๋ฃŒ๋œ ํ›„์— ํ•ด๋‹น ์ด๋ฏธ์ง€์˜ ํ•ด์ƒ๋„๋ฅผ ๊ตฌํ•ด์•ผํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ์—ˆ๋‹ค.

์ฒ˜์Œ์—” ๋‹จ์ˆœํžˆ ์•„๋ž˜์™€ ๊ฐ™์ด load ์ด๋ฒคํŠธ๋ฅผ bindํ•ด์„œ ์ฒ˜๋ฆฌํ–ˆ๋‹ค.

$('#targetImg').bind('load',function(event){
        // ...
        $(this).unbind(event);
});
$('#targetImg').once('load', function(){
    //... 
});

์ด ๊ฒฝ์šฐ์—๋Š” ์ด๋ฏธ์ง€๊ฐ€ ๋กœ๋”ฉ๋˜์ง€ ์•Š๊ณ  ์ด๋ฒคํŠธ๊ฐ€ ์ฒ˜๋ฆฌ๋˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค. ๊ทธ ์ด์œ ๋Š” Resource์™€ ์ƒ๊ด€ ์—†์ด DOM๋งŒ ์ƒ์„ฑ๋˜์–ด๋„ ์ด๋ฒคํŠธ๊ฐ€ ํ˜ธ์ถœ๋˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์ฆ‰, ์ด๋ฏธ์ง€์™€ ๊ฐ™์ด resource๋ฅผ ์š”๊ตฌํ•˜๋Š” ํŽ˜์ด์ง€์ผ ๊ฒฝ์šฐ ์ด๋ฏธ์ง€ ๋กœ๋”ฉ ์™„๋ฃŒ์™€ ์ƒ๊ด€์—†์ด ์ง„ํ–‰๋œ๋‹ค.

๊ทธ๋ž˜์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ฆฌ์†Œ์Šค ํ˜ธ์ถœ์ด ์™„๋ฃŒ๋œ ํ›„์— ํ˜ธ์ถœํ•˜๋Š” .onload ๋กœ ์‹œ๋„ํ•ด๋ดค๋‹ค.

window.onload = function(){};
https://t1.daumcdn.net/cfile/tistory/20653539511EFCF32A

.onload()๋Š” ์ด๋ฏธ์ง€๊ฐ€ ๋ธŒ๋ผ์šฐ์ € ์บ์‹œ์— ์ €์žฅ๋œ ๊ฒฝ์šฐ์—๋Š” ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š์•„ ์ด ๋ฐฉ๋ฒ•๋„ ๋ถˆ๊ฐ€๋Šฅํ–ˆ๋‹ค.

๊ฒฐ๊ตญ Image Object๋กœ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค. Image() ๊ฐ์ฒด๋Š” ์ด๋ฏธ์ง€๋ฅผ ๋™์ ์œผ๋กœ ์ƒ์„ฑํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. .onload ์ด๋ฒคํŠธ๋Š” ์ด๋ฏธ์ง€๊ฐ€ ๋กœ๋”ฉ์ด ์™„๋ฃŒ๋˜๋ฉด ์‹คํ–‰๋˜๋Š” ํ•จ์ˆ˜์ด๋‹ค.

var img = new Image();
img.onload = function(){
    var imgW =   img.width;
  var imgW =   img.height;
};
img.src = 'image_path';

๋‹ค์Œ๊ณผ ๊ฐ™์ด Image() ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•ด .onload() ์ด๋ฒคํŠธ๋กœ ์ด๋ฏธ์ง€ ํฌ๊ธฐ๋ฅผ ์ •ํ™•์ด ๊ตฌํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.

์ฐธ์กฐ ๋ฌธ์„œ

Last updated

Was this helpful?