Форум

greatilya · #1 (**permalink**) 27.08.2010, 05:21

На странице имеется несколько десятков изображений, размеры которых: от 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 размеры проставить возможности нет

inGray · #2 (**permalink**) 27.08.2010, 09:10

Можно каждой картинке повесить в событие onload нужный обработчик?

Kolyaj · #3 (**permalink**) 27.08.2010, 09:17

На onload надо вешать обработку, а не на $.ready.

greatilya · #4 (**permalink**) 28.08.2010, 07:15

Получилось! Если кому пригодиться, то вот скрипт вписывания изображений в размерные рамки на 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"

greatilya · #5 (**permalink**) 28.08.2010, 07:34

Только почему то в FF скрипт некорректно работает.
Почему-то уменьшает только после обновления страницы.
Как я понимаю это можно решить привязавшись к onload документа. Но хочется чтобы картинки сразу сжимались по мере загрузки.

x-yuri · #6 (**permalink**) 28.08.2010, 12:16

а в первый раз обработчик вызывается?

greatilya · #7 (**permalink**) 28.08.2010, 14:24

x-yuri,
При первой загрузке страницы обработчик

$(".goodsImage").load(function() {

не вызывается. Но после обновления страницы вызывается.

Сам код находится в:

$(document).ready(function(){   /* здесь */ }

Где-то читал что для правильной работы onLoad (правда не в ФФ, а Опере) сначала нужно задать действие на onLoad а потом прописывать свойство SRC. У меня же src="путь" прописаны в самом документе.

x-yuri · #8 (**permalink**) 28.08.2010, 18:22

Сообщение от 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 нельзя воспользоваться?

greatilya · #9 (**permalink**) 29.08.2010, 05:49

Сообщение от 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 всего документа, как я понимаю тогда там не будет проблем.

x-yuri · #10 (**permalink**) 29.08.2010, 13:51

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

А разве тут пишется не с решеткой $('#asd').load?

да, я ошибся, теперь работает, в частности в ff

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

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

попробуй

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

Тогда картинка не должна грузиться из кеша

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

Форум

Справочник

Discord чат

Курсы javascript