Изменение размеров картинки при загрузке
На странице имеется несколько десятков изображений, размеры которых: от 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 размеры проставить возможности нет |
Можно каждой картинке повесить в событие onload нужный обработчик? :-?
|
На onload надо вешать обработку, а не на $.ready.
|
Получилось! Если кому пригодиться, то вот скрипт вписывания изображений в размерные рамки на 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" |
Только почему то в FF скрипт некорректно работает.
Почему-то уменьшает только после обновления страницы. Как я понимаю это можно решить привязавшись к onload документа. Но хочется чтобы картинки сразу сжимались по мере загрузки. |
а в первый раз обработчик вызывается?
|
x-yuri,
При первой загрузке страницы обработчик
$(".goodsImage").load(function() {
не вызывается. Но после обновления страницы вызывается.Сам код находится в:
$(document).ready(function(){ /* здесь */ }
Где-то читал что для правильной работы onLoad (правда не в ФФ, а Опере) сначала нужно задать действие на onLoad а потом прописывать свойство SRC. У меня же 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 нельзя воспользоваться? |
Цитата:
Цитата:
Мог бы конечно сжать все картинки и сохранить их в отдельных файлах, но увы это не маленькие объемы и места на моем сервере не хватит. У меня 150000+ картинок (8Гб). А объем сервера пока 10Гб. А вот если на РНР проверять размеры картинок, и прописывать их сразу в код, то не знаю как это скажется на нагрузке. Вероятно такой вариант тоже имеет смысл... Может если эта проблема на самом деле из-за: Цитата:
$(this).src = $(this).src + '?' + случайное число Тогда картинка не должна грузиться из кеша. Ну если привязать к load картинки не получается то лучше уж привяжу к load всего документа, как я понимаю тогда там не будет проблем. |
Цитата:
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 17:06. |