Вход

Просмотр полной версии : Изменение размеров картинки при загрузке

greatilya
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
27.08.2010, 09:10
Можно каждой картинке повесить в событие onload нужный обработчик? :-?
Kolyaj
27.08.2010, 09:17
На onload надо вешать обработку, а не на $.ready.
greatilya
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
28.08.2010, 07:34
Только почему то в FF скрипт некорректно работает.
Почему-то уменьшает только после обновления страницы.
Как я понимаю это можно решить привязавшись к onload документа. Но хочется чтобы картинки сразу сжимались по мере загрузки.
x-yuri
28.08.2010, 12:16
а в первый раз обработчик вызывается?
greatilya
28.08.2010, 14:24
x-yuri,
При первой загрузке страницы обработчик $(".goodsImage").load(function() { не вызывается. Но после обновления страницы вызывается.

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

Где-то читал что для правильной работы onLoad (правда не в ФФ, а Опере) сначала нужно задать действие на onLoad а потом прописывать свойство SRC. У меня же src="путь" прописаны в самом документе.
x-yuri
28.08.2010, 18:22
Где-то читал что для правильной работы 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
29.08.2010, 05:49
$('asd').load
А разве тут пишется не с решеткой $('#asd').load? (в jQuery я совсем недавно начал осваиваться, поэтому еще не очень уверен в своих утверждениях)

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

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

Ну если привязать к load картинки не получается то лучше уж привяжу к load всего документа, как я понимаю тогда там не будет проблем.
x-yuri
29.08.2010, 13:51
А разве тут пишется не с решеткой $('#asd').load?
да, я ошибся, теперь работает, в частности в ff

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

Тогда картинка не должна грузиться из кеша
по поводу кэша это было так, предположение. А ты на локальной машине тестируешь? С другого компьютера так же работает в ff? Но вообще, делать после загрузки документа надежнее
greatilya
29.08.2010, 16:52
x-yuri,
Спасибо большое! Я тогда когда залью на сервер протестирую на разных ПК. Если будут глюки то поставлю на событие после загрузки документа. На РНР думаю не буду эту задачу решать, т.к. если это увеличит время загрузки, хоть не значительно, но уже при 100 одновременных посещениях это время загрузки будет значительным.

Всем спасибо!