Javascript-форум - Получение размера изображения

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

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Получение размера изображения (https://javascript.ru/forum/misc/40721-poluchenie-razmera-izobrazheniya.html)

Получение размера изображения

Привет народ, написал небольшой скриптик, который добавляет onclick
с функцией открытия в новом окне ко всем изображениям. По первому клику всё работает как положено, но стоит закрыть всплывающее окно
и повторно клацнуть по тому же изображению и image.width вместо размера оригинальной картинки отдаёт нуль ... Почему так происходит и как с этим бороться? :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
    <HEAD>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <TITLE>HTML  документ</TITLE>


<script type="text/javascript">

window.onload = function () {
	var imgs = document.getElementsByTagName('img');
    	var length = imgs.length;
 
	for (var i = 0; i < length; i++) {
        imgs[i].setAttribute("onclick", "openImageWindow(this.src);"); 
	};
};

  function openImageWindow(src) {
    var image = new Image();
    image.src = src;
    var width = image.width;
    var height = image.height;
 
     alert(width);
    if (width>600){
        width =width/2;
        height =height/2 ;
   }
    window.open(src,"Image","width=" + width + ",height=" + height + + 
 "toolbar=no,status=no,scrollbars=no,menubar=no,resizable=no"+',left=' + ((window.innerWidth - width)/2) + ',top=' + ((window.innerHeight - height)/2));
  }
</script>

    </HEAD>
<BODY>


<img src="123.jpg" width="500"  height="400"  />
<img src="12345.png"  />
</BODY>
</HTML>

Цитата:

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

imgs[i].setAttribute("onclick", "openImageWindow(this.src);");

не используй атрибут. Используй свойство:

imgs[i].onclick = function() { openImageWindow(this.src) }

А зачем в окне открывать изображение тех же самых размеров что на странице? В чем профит то? Ладно бы увеличенное открывать, но тут таже картинка..

Цитата:

Сообщение от danik.js (Сообщение 267926)

не используй атрибут. Используй свойство:

imgs[i].onclick = function() { openImageWindow(this.src) }

спасибо буду знать, но как это решает проблему? Как по второму клику на той же картинке в width передавался нуль так и передаётся. И да, изображение открывается не как на странице, а как раз оригинального размера (попробуй запустить :) ), просто если оно больше 600 пикселей в ширину, размеры делятся пополам ...

или я чего то не понимаю?

Кстати сказать, сейчас эмпирическим путем было вычислено что проблема есть только в chrome, firefox отдаёт правильный размер каритнки при каждом клике

Я знаю что делаю что то не так, подскажите как написать грамотно

Для начала нужно создавать превьюшки а не ужимать картинки через css. Кто ж так делает то, а?

clampson, onload поставьте.

var image = new Image();
image.src = 'image.jpg';
image.onload = function() {
   alert( [image.width, image.height] );
}

clampson,
проблемы в chrome необнаружил ... :-?

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script type="text/javascript">

window.onload = function () {
	var imgs = document.getElementsByTagName('img');
    	var length = imgs.length;

	for (var i = 0; i < length; i++) {
        imgs[i].onclick=function ()
{
  openImageWindow(this);
}
	};
};

  function openImageWindow(img) {

    var src = img.src;
    var width = img.width;
    var height = img.height;

     alert(width);
    if (width>600){
        width =width/2;
        height =height/2 ;
   }
    window.open(src,"Image","width=" + width + ",height=" + height + "toolbar=no,status=no,scrollbars=no,menubar=no,resizable=no"+',left=' + ((window.innerWidth - width)/2) + ',top=' + ((window.innerHeight - height)/2));
  }
</script>

</head>

<body>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width="500"  height="400"  />
<img src="http://clampson.ru/img/123.png"  />
</body>

</html>

Ruslan_xDD,
на всякий случай сначала onload потом src

Цитата:

Сообщение от danik.js (Сообщение 267952)

Для начала нужно создавать превьюшки а не ужимать картинки через css. Кто ж так делает то, а?

Так делают очень много людей, кто при создании статьи пользуется визуальными редакторами с возможностью вставки изображения, например WYSIWYG, CKEditor