flower
Новичок
Смена картинки с изменением размера
На странице есть картинка. Её нужно заменить другой картинкой, причём уменьшить её (новую) до определённых размеров. Если старая картинка маленькая, а новая - большая (больше размеров рабочего поля документа), то в промежутке будет очень неприятный рывок: старую маленькую картинку заменит новая большая (это отобразится на экране), затем большая уменьшится.
Код выполняет следующее: создаёт невидимый рисунок из новой картинки. Находит новые размеры картинки (уменьшает). Придаёт эти размеры старой картинке и придаёт ей src новой картинки старой.
Проблема в том, что на больших картинах (5000*5000 пикселей) происходит глюк. Видимо, от того, что картинка не успевает догрузиться, а скрипт работает дальше (не уверен, но другого объяснения пока нет) и браузер начинает жутко тормозить.
<img src=abc.jpg id=old> - картинка в теле hml-документа, которую нужно заменить
код:
srcu='new.jpg' - новая картинка, которой нужно заменить старую
dest='old' - id картинки, которую меняем
width=200 - макс.размер новой картинки по ширине
height=200 - макс. по высоте
hiddenImg= new Image(); создаём невидимый рисунок
hiddenImg.src=srcu; даём ему url новой картинки
width_orig=hiddenImg.width; находим исходную ширину этого рисунка
height_orig=hiddenImg.height; находим исходную высоту
if (width_orig>width || height_orig>height) ограничиваем размеры и находим новые
{
ratio_orig = width_orig/height_orig;
if (width/height > ratio_orig) width = height*ratio_orig;
else height = width/ratio_orig;
}
else {height=height_orig; width=width_orig;} если картинка меньше огрничителей
document.getElementById(dest).style.width=width; даём старой картинке новую ширину
document.getElementById(dest).style.height=height; новую высоту
document.getElementById(dest).src=srcu; даём старой картнке новый src
-----
пробовал определять момент, когда создастся невидимый рисунок:
hiddenImg= new Image();
hiddenImg.src=srcu;
hiddenImg.onload=alert('loaded');
алерт срабатывает, но выдаёт сразу после этого ошибку "Не поддерживается" - видимо, что-то не нравится в строке "hiddenImg.onload".
Подскажите, в какую сторону смотреть?
-~{}~ 21.04.08 07:01:
Сделал через определение загрузки картинки по hiddenImg.complete.
Всем спасибо
На странице есть картинка. Её нужно заменить другой картинкой, причём уменьшить её (новую) до определённых размеров. Если старая картинка маленькая, а новая - большая (больше размеров рабочего поля документа), то в промежутке будет очень неприятный рывок: старую маленькую картинку заменит новая большая (это отобразится на экране), затем большая уменьшится.
Код выполняет следующее: создаёт невидимый рисунок из новой картинки. Находит новые размеры картинки (уменьшает). Придаёт эти размеры старой картинке и придаёт ей src новой картинки старой.
Проблема в том, что на больших картинах (5000*5000 пикселей) происходит глюк. Видимо, от того, что картинка не успевает догрузиться, а скрипт работает дальше (не уверен, но другого объяснения пока нет) и браузер начинает жутко тормозить.
<img src=abc.jpg id=old> - картинка в теле hml-документа, которую нужно заменить
код:
srcu='new.jpg' - новая картинка, которой нужно заменить старую
dest='old' - id картинки, которую меняем
width=200 - макс.размер новой картинки по ширине
height=200 - макс. по высоте
hiddenImg= new Image(); создаём невидимый рисунок
hiddenImg.src=srcu; даём ему url новой картинки
width_orig=hiddenImg.width; находим исходную ширину этого рисунка
height_orig=hiddenImg.height; находим исходную высоту
if (width_orig>width || height_orig>height) ограничиваем размеры и находим новые
{
ratio_orig = width_orig/height_orig;
if (width/height > ratio_orig) width = height*ratio_orig;
else height = width/ratio_orig;
}
else {height=height_orig; width=width_orig;} если картинка меньше огрничителей
document.getElementById(dest).style.width=width; даём старой картинке новую ширину
document.getElementById(dest).style.height=height; новую высоту
document.getElementById(dest).src=srcu; даём старой картнке новый src
-----
пробовал определять момент, когда создастся невидимый рисунок:
hiddenImg= new Image();
hiddenImg.src=srcu;
hiddenImg.onload=alert('loaded');
алерт срабатывает, но выдаёт сразу после этого ошибку "Не поддерживается" - видимо, что-то не нравится в строке "hiddenImg.onload".
Подскажите, в какую сторону смотреть?
-~{}~ 21.04.08 07:01:
Сделал через определение загрузки картинки по hiddenImg.complete.
Всем спасибо