Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.05.2009, 13:08
kondrat
 
Сообщений: n/a

Определение размеров изображения
Здраствуйте, я пытаюсь центрировать картинку на сайте, которая открывается в новом диве, картинка создается таким образом:
var img = document.createElement('div');
img.src = 'image.jpg';
потом я пытаюсь вычислить размеры изображения с помощью свойств offsetHeight и offsetWidth но дело в том что пока изображение не загружено эти свойства или показывают 0 или размеры до которых изображение загрузилось, пытался через setTimeout показывать изображение, но его размер ведь может быть разным и грузиться будет по разному, как средствами javascript определить когда загрузилось изображение и можно получить его размеры, чтобы отцентрировать?
Ответить с цитированием
  #2 (permalink)  
Старый 05.05.2009, 13:09
Аватар для Riim
Рассеянный профессор
Отправить личное сообщение для Riim Посмотреть профиль Найти все сообщения от Riim
 
Регистрация: 06.04.2009
Сообщений: 2,379

src у div-а. Классно!!!
Ответить с цитированием
  #3 (permalink)  
Старый 05.05.2009, 13:10
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от kondrat
document.createElement('div');
Опечатка?

У изображений есть событие onload.
Ответить с цитированием
  #4 (permalink)  
Старый 05.05.2009, 19:00
kondrat
 
Сообщений: n/a

опечатка, onload чето не работает в опере, а в ie6 кэшируется(
Ответить с цитированием
  #5 (permalink)  
Старый 05.05.2009, 20:00
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Покажите код с onload.
Ответить с цитированием
  #6 (permalink)  
Старый 05.05.2009, 20:50
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

onload надо назначать до присваивания img.src
Ответить с цитированием
  #7 (permalink)  
Старый 06.05.2009, 11:18
kondrat
 
Сообщений: n/a

спасибо, с оперой разобрался, только теперь еще возник вопрос, как узнать размеры изображения до вывода его на страницу, просто получается так что оно выводиться в верхнем левом углу а только после 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 = "progidXImageTransform.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>
Ответить с цитированием
  #8 (permalink)  
Старый 06.05.2009, 11:53
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

а ты не хочешь воспользоваться тэгом html для оформления кода и отступы сделать
Ответить с цитированием
  #9 (permalink)  
Старый 06.05.2009, 12:24
kondrat
 
Сообщений: n/a

спасибо, с оперой разобрался, только теперь еще возник вопрос, как узнать размеры изображения до вывода его на страницу, просто получается так что оно выводиться в верхнем левом углу а только после 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.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>
Ответить с цитированием
  #10 (permalink)  
Старый 06.05.2009, 12:39
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
IE6 и определение размеров ВСЕГО документа jestalnar Общие вопросы Javascript 1 02.02.2009 11:05
Изменение размеров в зависимости от картинки lanzs Элементы интерфейса 9 10.12.2008 21:39
Динамическое изменение размеров изображения Макс Элементы интерфейса 7 21.07.2008 16:55
как при добавлении изображения на сервер считывать имя в БД? solomusic Серверные языки и технологии 3 12.06.2008 23:28
Визуальное выделение части изображения Гость Общие вопросы Javascript 0 25.02.2008 19:44