Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.06.2011, 05:06
Аспирант
Отправить личное сообщение для dopelher Посмотреть профиль Найти все сообщения от dopelher
 
Регистрация: 10.08.2009
Сообщений: 32

не могу определить размеры img
Добрый день! Подскажите, плз, кто знает.
Почему-то img_width и img_height определяются как 0.
Они определяются правильно только в случае, если задать размеры рисунку в CSS. Хотелось бы знать почему...

$(document).ready(function(){
$('.product-image-large').each(function() {			
var MAX_WIDTH = 120;
var MAX_HEIGHT = 90;
var img_width = $(this).width();
var img_height = $(this).height();
var ratio;
if(img_width<MAX_WIDTH && img_height<MAX_HEIGHT){ratio=1;}
else if(img_width>img_height){	ratio=MAX_WIDTH/img_width;}			
else {ratio=MAX_HEIGHT/img_height;}
img_width=img_width*ratio;
img_height=img_height*ratio;
});
$('.product-image-large').css({'width': img_width, 'height': img_height});
});//
Ответить с цитированием
  #2 (permalink)  
Старый 23.06.2011, 05:32
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

Потому что ширина/высота картинки определяются (нормально) только после её полной загрузки.

<div id="cont"><div>
<script>
cont= document.getElementById("cont");
img= document.createElement("img");
img.onload=function() {alert(img.offsetWidth+ "x" +img.offsetHeight)}; //после загрузки
img.src= "http://www.naturewallpaper.net/wallpapers/hawaiian_rainbow___id_41280-1400x1050.jpg";
cont.appendChild(img);
alert(img.offsetWidth+ "x" +img.offsetHeight); //до загрузки
</script>
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #3 (permalink)  
Старый 23.06.2011, 05:44
Аспирант
Отправить личное сообщение для dopelher Посмотреть профиль Найти все сообщения от dopelher
 
Регистрация: 10.08.2009
Сообщений: 32

Спасибо за ответ. напрашивается вопрос - а можно ли решить эту проблему средствами jQuery или поможет только JS.
Спасибо.
Ответить с цитированием
  #4 (permalink)  
Старый 23.06.2011, 06:34
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

В jquery eсть событие load, нет?

Признаться, не силён в jquery, поэтому не могу сказать точно.
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #5 (permalink)  
Старый 23.06.2011, 10:05
Аспирант
Отправить личное сообщение для dopelher Посмотреть профиль Найти все сообщения от dopelher
 
Регистрация: 10.08.2009
Сообщений: 32

Большое спасибо!
Действительно через load все работает
$('img.product-image-large').load(function(){
						img_resize();
					});

			function img_resize() {
					$('.product-image-large').each(function() {			
					$(this).width('');
					$(this).height('');
					var MAX_WIDTH = 220;
					var MAX_HEIGHT = 180;
					var img_width = $(this).width();
					var img_height = $(this).height();
					var ratio;
					if(img_width<=MAX_WIDTH && img_height<=MAX_HEIGHT){ratio=1;}
					else if(img_width>img_height){	ratio=MAX_WIDTH/img_width;}			
					else {ratio=MAX_HEIGHT/img_height;}
					//alert(ratio);
					//if (ratio>1){ratio=1;}
					$(this).css("width", img_width*ratio); // Set new width
					$(this).css("height", img_height*ratio);  // Scale height based on
					}); }//img_resize()
Ответить с цитированием
  #6 (permalink)  
Старый 23.06.2011, 11:28
Новичок на форуме
Отправить личное сообщение для killer8080 Посмотреть профиль Найти все сообщения от killer8080
 
Регистрация: 01.02.2011
Сообщений: 6

dopelher
не оптимально получается, функци img_resize будет вызываться столько раз, сколько картинок в документе и проделывать одну и ту же работу, может лучше как то так?
$('img.product-image-large').load(function(){
	var MAX_WIDTH = 220;
	var MAX_HEIGHT = 180;
	var img_width = $(this).width();
	var img_height = $(this).height();
	var ratio;
	if(img_width<=MAX_WIDTH && img_height<=MAX_HEIGHT){
		ratio=1;
	}
	else if(img_width>img_height){
		ratio=MAX_WIDTH/img_width;
	}
	else {
		ratio=MAX_HEIGHT/img_height;
	}
	//alert(ratio);
	//if (ratio>1){ratio=1;}
	$(this).css("width", img_width*ratio); // Set new width
	$(this).css("height", img_height*ratio);  // Scale height based on
});
Ответить с цитированием
  #7 (permalink)  
Старый 23.06.2011, 15:26
Аспирант
Отправить личное сообщение для dopelher Посмотреть профиль Найти все сообщения от dopelher
 
Регистрация: 10.08.2009
Сообщений: 32

Да можно и так, у меня просто большая картинка одна, у которой меняется src при наведении на маленькие картинки, поэтому удобней каждый раз пересчитывать пропорции через функцию.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Определить присутствует ли скролл на iframe sergiyko Общие вопросы Javascript 3 14.03.2011 22:15
определить где курсор olgatcpip Общие вопросы Javascript 5 27.04.2010 08:59
Изменение img src при hover на другом img -- как? adelante jQuery 2 14.04.2010 07:12
У элемента img внутри form пропадает событие после onsubmit формы Eugene Events/DOM/Window 2 18.06.2009 18:21
Не могу определить элемент AlexMak Общие вопросы Javascript 23 21.01.2009 16:50