Javascript-форум - Определение размеров изображения

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Определение размеров изображения (https://javascript.ru/forum/events/3589-opredelenie-razmerov-izobrazheniya.html)

Определение размеров изображения

Здраствуйте, я пытаюсь центрировать картинку на сайте, которая открывается в новом диве, картинка создается таким образом:
var img = document.createElement('div');
img.src = 'image.jpg';
потом я пытаюсь вычислить размеры изображения с помощью свойств offsetHeight и offsetWidth но дело в том что пока изображение не загружено эти свойства или показывают 0 или размеры до которых изображение загрузилось, пытался через setTimeout показывать изображение, но его размер ведь может быть разным и грузиться будет по разному, как средствами javascript определить когда загрузилось изображение и можно получить его размеры, чтобы отцентрировать?

src у div-а. Классно!!!

Цитата:

Сообщение от kondrat

document.createElement('div');

Опечатка?

У изображений есть событие onload.

опечатка, onload чето не работает в опере, а в ie6 кэшируется(

Покажите код с onload.

onload надо назначать до присваивания img.src

спасибо, с оперой разобрался, только теперь еще возник вопрос, как узнать размеры изображения до вывода его на страницу, просто получается так что оно выводиться в верхнем левом углу а только после onload центрируется, пробовал менять visibility, но это не лучше: появляется скролл, или остается только загружать изображения аяксом, передавая размеры... ниже код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<script type="text/javascript">
function id(name) {return document.getElementById(name);}
function scrollY() {return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;}
function scrollX() {return self.pageXOffset || (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft;}
function getScrollHeight() {return (document.body.scrollHeight > document.body.offsetHeight)?document.body.scrollHe ight:document.body.offsetHeight;}
function getScrollWidth() {return (document.body.scrollWidth > document.body.offsetWidth)?document.body.scrollWid th:document.body.offsetWidth;}
function getClientWidth() {return self.innerWidth || (document.documentElement && document.documentElement.clientWidth) || document.body.clientWidth;}
function getClientHeight() {return self.innerHeight || (document.documentElement && document.documentElement.clientHeight) || document.body.clientHeight;}
window.onresize = function() {overlay(id('over')); centering(id('loadImg'));};
document.onclick = function() {
var div = document.createElement('div');
div.id = 'over';
div.style.position = 'absolute';
div.style.top = '0px';
div.style.left = '0px';
div.style.background = 'blue';
setOpacity(div,50);
overlay(div);
var img = new Image();
img.id = 'loadImg';
img.style.position = 'absolute';
img.onload = function() {
showImg(img);
};
img.src = 'http://www.knowledgerush.com/wiki_image/6/60/Gondola.arp.750pix.jpg'; // изображение
document.getElementsByTagName('body')[0].appendChild(div);
document.getElementsByTagName('body')[0].appendChild(img);
};
function setOpacity(elem,lavel) {
if('\v'=='v') elem.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" +lavel+")";
else elem.style.opacity = lavel/100;
}
function overlay(elem) {
elem.style.height = getClientHeight() > getScrollHeight() ? getClientHeight()+'px' : getScrollHeight()+'px';
elem.style.width = getClientWidth() > getScrollWidth() ? getClientWidth()+'px' : getScrollWidth()+'px';
}
function centering(elem) {
var t = scrollY() + (getClientHeight()/2 - elem.offsetHeight/2);
var l = scrollX() + (getClientWidth()/2 - elem.offsetWidth/2);
elem.style.top = t+'px';
elem.style.left = l+'px';
}
function showImg(elem) {
centering(elem);
}
</script>
</head>
<style type="text/css">
body {margin:0}
</style>
<body>

</body>
</html>

а ты не хочешь воспользоваться тэгом html для оформления кода и отступы сделать ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<script type="text/javascript">
function id(name) {return document.getElementById(name);}
function scrollY() {return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;}
function scrollX() {return self.pageXOffset || (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft;}
function getScrollHeight() {return (document.body.scrollHeight > document.body.offsetHeight)?document.body.scrollHeight:document.body.offsetHeight;}
function getScrollWidth() {return (document.body.scrollWidth > document.body.offsetWidth)?document.body.scrollWidth:document.body.offsetWidth;}
function getClientWidth() {return self.innerWidth || (document.documentElement && document.documentElement.clientWidth) || document.body.clientWidth;}
function getClientHeight() {return self.innerHeight || (document.documentElement && document.documentElement.clientHeight) || document.body.clientHeight;}
window.onresize = function() {overlay(id('over')); centering(id('loadImg'));};
document.onclick = function() {
	var div = document.createElement('div');
	div.id = 'over';
	div.style.position = 'absolute';
	div.style.top = '0px';
	div.style.left = '0px';
	div.style.background = 'blue';
	setOpacity(div,50);
	overlay(div);
	var img = new Image();
	img.id = 'loadImg';	
	img.style.position = 'absolute';
	setOpacity(img,0);
	img.onload = function() {
		showImg(img);
		setOpacity(img,100);
	};
	img.src = 'http://www.knowledgerush.com/wiki_image/6/60/Gondola.arp.750pix.jpg'; // изображение 
	document.getElementsByTagName('body')[0].appendChild(div);
	document.getElementsByTagName('body')[0].appendChild(img);
};
function setOpacity(elem,lavel) {
	if('\v'=='v') elem.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity="+lavel+")";
	else elem.style.opacity = lavel/100;
}
function overlay(elem) {
	elem.style.height = getClientHeight() > getScrollHeight() ? getClientHeight()+'px' : getScrollHeight()+'px';
	elem.style.width = getClientWidth() > getScrollWidth() ? getClientWidth()+'px' : getScrollWidth()+'px';
}
function centering(elem) {
	var t = scrollY() + (getClientHeight()/2 - elem.clientHeight/2);
	var l = scrollX() + (getClientWidth()/2 - elem.clientWidth/2);
	elem.style.top = t+'px';
	elem.style.left = l+'px';	
}
function showImg(elem) {
	centering(elem);
}
</script>
</head>
<style type="text/css">
body {margin:0;}
</style>
<body>
</body>
</html>

var img = new Image();
img.onload = function() {
	alert(img.width+', '+img.height);
}
img.src = 'logo.jpg';

p.s. зачем ты добавляешь изображение в документ до его загрузки