Изменение размеров картинки при загрузке
На странице имеется несколько десятков изображений, размеры которых: от 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 всего документа, как я понимаю тогда там не будет проблем. |
Цитата:
Цитата:
Цитата:
|
x-yuri,
Спасибо большое! Я тогда когда залью на сервер протестирую на разных ПК. Если будут глюки то поставлю на событие после загрузки документа. На РНР думаю не буду эту задачу решать, т.к. если это увеличит время загрузки, хоть не значительно, но уже при 100 одновременных посещениях это время загрузки будет значительным. Всем спасибо! |
| Часовой пояс GMT +3, время: 14:14. |