Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.08.2010, 05:21
Аватар для greatilya
Интернет-турист
Отправить личное сообщение для greatilya Посмотреть профиль Найти все сообщения от greatilya
 
Регистрация: 01.08.2008
Сообщений: 516

Изменение размеров картинки при загрузке
На странице имеется несколько десятков изображений, размеры которых: от 100х100 до 800х800. Необходимо чтобы при загрузке они изменялись в размерах пропорционально и вписывались в размерную рамку 174х214.
Написал следующий скрипт:

$(function() {
			$(".wrapper_pic_td img").each(function() {
				var newW = 174;
		        var newH = 214;
				var oldW = $(this).width();
				var oldH = $(this).height();
				if(oldW > newW || oldH > newH)
				{
					if(parseInt((newW/oldW) * oldH) <= newH)
					{
						$(this).width(newW);
						$(this).height(parseInt((newW/oldW) * oldH));
					}
					else
					{
						$(this).height(newH);
						$(this).width(parseInt((newH/oldH) * oldW));
					}
				}
			});
		});

Пробовал его вставлять как сразу после вывода изображений, так и в область $(document).ready(function(){ });
Всё равно присутствовал баг: при загрузке страницы картинки не меняли своего размера. Но если обновить страницу то все размеры правильно проставлялись.
Как я понимаю дело в том что при первой загрузке картинки еще не прогрузились, а я уже вызвал скрипт изменения размеров. К какому событию правильнее будет цеплять данную функцию?

PS: средствами PHP размеры проставить возможности нет
__________________
VPS от 175 рублей (есть скидки 15% писать в ПМ) Анализ рынка VPS серверов
Есть только две бесконечные вещи: Вселенная и глупость. Хотя насчет Вселенной я не уверен.
Альберт Эйнштейн
Ответить с цитированием
  #2 (permalink)  
Старый 27.08.2010, 09:10
Новичок
Отправить личное сообщение для inGray Посмотреть профиль Найти все сообщения от inGray
 
Регистрация: 03.08.2010
Сообщений: 230

Можно каждой картинке повесить в событие onload нужный обработчик?
Ответить с цитированием
  #3 (permalink)  
Старый 27.08.2010, 09:17
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

На onload надо вешать обработку, а не на $.ready.
Ответить с цитированием
  #4 (permalink)  
Старый 28.08.2010, 07:15
Аватар для greatilya
Интернет-турист
Отправить личное сообщение для greatilya Посмотреть профиль Найти все сообщения от greatilya
 
Регистрация: 01.08.2008
Сообщений: 516

Получилось! Если кому пригодиться, то вот скрипт вписывания изображений в размерные рамки на jQuery:
$(".goodsImage").css('visibility','hidden');
		$(".goodsImage").load(function() { 
		var newW = 174; 
		var newH = 214; 
		var oldW = $(this).width(); 
		var oldH = $(this).height(); 
		if(oldW > newW || oldH > newH) 
		{ 
			if(parseInt((newW/oldW) * oldH) <= newH) 
			{ 
				$(this).width(newW); 
				var setH = parseInt((newW/oldW) * oldH);
				$(this).height(setH);
				$(this).css('margin-top' , parseInt((newH - setH) / 2)+'px');
			} 
			else
			{ 
				$(this).height(newH); 
				$(this).width(parseInt((newH/oldH) * oldW)); 
			} 
		}
		$(this).css('visibility','visible');
		});

Примечание: у изображений должен быть установлен class="goodsImage"
__________________
VPS от 175 рублей (есть скидки 15% писать в ПМ) Анализ рынка VPS серверов
Есть только две бесконечные вещи: Вселенная и глупость. Хотя насчет Вселенной я не уверен.
Альберт Эйнштейн
Ответить с цитированием
  #5 (permalink)  
Старый 28.08.2010, 07:34
Аватар для greatilya
Интернет-турист
Отправить личное сообщение для greatilya Посмотреть профиль Найти все сообщения от greatilya
 
Регистрация: 01.08.2008
Сообщений: 516

Только почему то в FF скрипт некорректно работает.
Почему-то уменьшает только после обновления страницы.
Как я понимаю это можно решить привязавшись к onload документа. Но хочется чтобы картинки сразу сжимались по мере загрузки.
__________________
VPS от 175 рублей (есть скидки 15% писать в ПМ) Анализ рынка VPS серверов
Есть только две бесконечные вещи: Вселенная и глупость. Хотя насчет Вселенной я не уверен.
Альберт Эйнштейн
Ответить с цитированием
  #6 (permalink)  
Старый 28.08.2010, 12:16
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

а в первый раз обработчик вызывается?
Ответить с цитированием
  #7 (permalink)  
Старый 28.08.2010, 14:24
Аватар для greatilya
Интернет-турист
Отправить личное сообщение для greatilya Посмотреть профиль Найти все сообщения от greatilya
 
Регистрация: 01.08.2008
Сообщений: 516

x-yuri,
При первой загрузке страницы обработчик
$(".goodsImage").load(function() {
не вызывается. Но после обновления страницы вызывается.

Сам код находится в:
$(document).ready(function(){   /* здесь */ }


Где-то читал что для правильной работы onLoad (правда не в ФФ, а Опере) сначала нужно задать действие на onLoad а потом прописывать свойство SRC. У меня же src="путь" прописаны в самом документе.
__________________
VPS от 175 рублей (есть скидки 15% писать в ПМ) Анализ рынка VPS серверов
Есть только две бесконечные вещи: Вселенная и глупость. Хотя насчет Вселенной я не уверен.
Альберт Эйнштейн

Последний раз редактировалось greatilya, 28.08.2010 в 15:55.
Ответить с цитированием
  #8 (permalink)  
Старый 28.08.2010, 18:22
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

Сообщение от greatilya
Где-то читал что для правильной работы onLoad (правда не в ФФ, а Опере) сначала нужно задать действие на onLoad а потом прописывать свойство SRC.
да, и странно, что оно вообще работает. У меня, например, не работает нигде
<!doctype html>
<html>
<body>
<img id="asd" src="http://ljplus.ru/img/j/o/john_petrov/SvetIVoTmeSvetit.jpg" style="
    width: 50px;
">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
		$('#asd').load(function(){
			alert(1);
		});
</script>
</body>
</html>

мне почему-то кажеся, что это может с каким-нибудь кэшем связано

а чего php нельзя воспользоваться?

Последний раз редактировалось x-yuri, 29.08.2010 в 13:18.
Ответить с цитированием
  #9 (permalink)  
Старый 29.08.2010, 05:49
Аватар для greatilya
Интернет-турист
Отправить личное сообщение для greatilya Посмотреть профиль Найти все сообщения от greatilya
 
Регистрация: 01.08.2008
Сообщений: 516

Сообщение от x-yuri
$('asd').load
А разве тут пишется не с решеткой $('#asd').load? (в jQuery я совсем недавно начал осваиваться, поэтому еще не очень уверен в своих утверждениях)

Сообщение от x-yuri
а чего php нельзя воспользоваться
Ну если я на лету буду картинки через PHP то получу неслабую нагрузку на сервер. На одной странице отображается 40 картинок.
Мог бы конечно сжать все картинки и сохранить их в отдельных файлах, но увы это не маленькие объемы и места на моем сервере не хватит. У меня 150000+ картинок (8Гб). А объем сервера пока 10Гб.
А вот если на РНР проверять размеры картинок, и прописывать их сразу в код, то не знаю как это скажется на нагрузке. Вероятно такой вариант тоже имеет смысл...

Может если эта проблема на самом деле из-за:
Сообщение от greatilya
сначала нужно задать действие на onLoad а потом прописывать свойство SRC
то может и вправду сначала пропишу $(".goodsImage").load(function() { } а после сделаю смену картинки на эту же типа того:
$(this).src = $(this).src + '?' + случайное число Тогда картинка не должна грузиться из кеша.

Ну если привязать к load картинки не получается то лучше уж привяжу к load всего документа, как я понимаю тогда там не будет проблем.
__________________
VPS от 175 рублей (есть скидки 15% писать в ПМ) Анализ рынка VPS серверов
Есть только две бесконечные вещи: Вселенная и глупость. Хотя насчет Вселенной я не уверен.
Альберт Эйнштейн

Последний раз редактировалось greatilya, 29.08.2010 в 05:56.
Ответить с цитированием
  #10 (permalink)  
Старый 29.08.2010, 13:51
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

Сообщение от greatilya
А разве тут пишется не с решеткой $('#asd').load?
да, я ошибся, теперь работает, в частности в ff

Сообщение от greatilya
А вот если на РНР проверять размеры картинок, и прописывать их сразу в код, то не знаю как это скажется на нагрузке.
попробуй

Сообщение от greatilya
Тогда картинка не должна грузиться из кеша
по поводу кэша это было так, предположение. А ты на локальной машине тестируешь? С другого компьютера так же работает в ff? Но вообще, делать после загрузки документа надежнее
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение размеров картинки через скрипт SLV Общие вопросы Javascript 4 27.12.2010 11:40
Динамическое изменение размеров фоновой картинки ячейки shaitan Элементы интерфейса 4 15.04.2010 13:30
Динамическое изменение размеров блока при наведении мыши! Viktor ------- Общие вопросы Javascript 7 05.05.2009 19:13
Изменение картинки при ховере на ссылку DImaN Общие вопросы Javascript 0 25.12.2008 12:13
Изменение размеров в зависимости от картинки lanzs Элементы интерфейса 9 10.12.2008 21:39