| |
|
|
| | Такая задача:
есть страница. На нее будут подгружаться при помощи JS изображения. Делается это при помощи скрипта:
function bigpic(newsrc) {
var pic=new Image();
pic.src=newsrc;
var picw=pic.width;
var pich=pic.height;
div.style.width=picw;
div.style.height=pich;
}
|
Как видно из скрипта, нужно задать диву размеры этой картинки. На сколько я понимаю, картинка будет загружена уже когда я написал
pic.src=newsrc;
Или нет? Если нет, тогда понятно почему pic.widh и pic.height возвращают 0. Но тогда как померять ширину и высоту картинки?
ЗЫ. Самое интересное, что после первого прогона этого скрипта все нормализуется и работает как должно. Т.е. на второе нажатие высота и ширина картинки уже не будут 0.
Помогите пожалуйста... | |
| |
|
|
| |
|
|
| |
для: SHAman
(23.11.2006 в 17:58)
| | | pic.src=newsrc инициирует загрузку, а будет загружена по событию onLoad. | |
| |
|
|
| |
|
|
| |
для: AlexSol
(23.11.2006 в 19:32)
| | | т.е.
pic.onload=function(){alert([pic.width,pic.height])}
|
| |
| |
|
|
| |
|
|
| |
для: 12345
(23.11.2006 в 19:49)
| | | Спасибо, сейчас попробую... | |
| |
|
|
| |
|
|
| |
для: SHAman
(24.11.2006 в 14:15)
| | | Не получается.... Вот мой код:
var pic=new Image();
pic.src=newsrc; //инициация загрузки большой картинки
var picw, pich; //инициация переменных высоты и ширины большой картинки
pic.onload=function() {
picw=pic.width; pich=pic.height; alert('картинка загрузилась');
} //определение момента загрузки большой картинки
alert(picw+', '+pich); //вывод ширины и высоты большой картинки после ее загрузки.
|
Блин, как только выполнилась первая строка, объект уже существует, а значит, проверка
if (pic) уже вернет true. Как мне сделать так, чтобы скрипт дожидался загрузки картинки? А не пытался определить высоту и ширину до ее загрузки? | |
| |
|
|
| |
|
|
| |
для: SHAman
(24.11.2006 в 15:09)
| | | Я знаю, что в РНР есть ф-ция определения размера файла, по идее аналог должен быть и в ява-скрипт. Используя такую функцию, можно заставить скрипт определять ширину и высоту картинки, только если файл имеет размер не менее заданного. Т.е. когда он уже загружен. | |
| |
|
|
| |
|
|
| |
для: coloboc66
(24.11.2006 в 16:04)
| | | Ну, то, что определить размер картинки можно только после того, как загрузишь ее - логично. Но как определить тот момент, когда она загрузилась, чтобы начать определять размеры? И ПХП тут не при чем. В данном случае интересует JS... | |
| |
|
|
| |
|
|
| |
для: SHAman
(24.11.2006 в 16:13)
| | | Я конечно извиняюсь, может я невнимательно читал тему, но, насколько я понимаю, если вы помещаете картинку в ДИВ, просто не нужно для дива указывать НИКАКИХ размеров, ни стилями, ни скриптами. Его размеры автоматически будут подогнаны под размер картинки. | |
| |
|
|
| |
|
|
| |
для: coloboc66
(24.11.2006 в 16:33)
| | | Ширину и высоту мне нужно задавать диву. Из них высчитывается позиционирование. Див потом будет вставать по середине экрана, для этого надо знать ширину высоту экрана и ширину высоту дива. А див - под размер картинки;)
Пожалуйста, не обходите тему. Я точно знаю что мне нужно. Мне нужно определить ширину и высоту картинки в тот момент, когда она загрузится, но не раньше. | |
| |
|
|
| |
|
|
| |
для: SHAman
(24.11.2006 в 16:39)
| | | О! Нашел решение. Подсказали.
Надо просто делать так:
var pic=new Image();
var picw, pich; //инициация переменных высоты и ширины большой картинки
pic.onload=function() {picw=pic.width; pich=pic.height;} //определение момента загрузки большой картинки
pic.src=newsrc; //инициация загрузки большой картинки
|
То бишь, нужно присваивать картинке src уже после того, как произошла ее загрузка =)
.....:(:(:(:(
Блин, теперь выводит просто ошибку. Короче: тыкаю на картинку, он говорит - ошибка. еще раз тыкаю - работает.... Че делать? Вот, короче, полный код:
function bigpic(newsrc, title) {
var div = d.getElementById('bigpic');
var pic=new Image();
var picw, pich; //инициация переменных высоты и ширины большой картинки
pic.onload=function() {picw=pic.width; pich=pic.height;} //определение момента загрузки большой картинки
pic.src=newsrc; //инициация загрузки большой картинки
var bod=d.getElementById('body');
var x = d.getElementById('close');
var win_x=bod.clientWidth;
var win_y=bod.scrollTop;
div.style.width=picw;
div.style.height=pich;
var divc=div.innerHTML;
var newtext='<span id=close onclick="closepic();" style="float: right;">[X]</span><div id=bigpic_tit>'+title+'</div><img src='+newsrc+' id=pic />';
div.innerHTML=newtext;
div.style.left=(win_x/2-picw/2);
div.style.top=(win_y+bod.clientHeight/2-pich/2);
div.style.display='inline';
}
|
А! Уже голова пухнет от этой картинки...:( Подсобите. | |
| |
|
|
| |
|
|
| |
для: SHAman
(24.11.2006 в 15:09)
| | | ... | |
| |
|
|
| |
|
|
| |
для: RMW
(24.11.2006 в 18:35)
| | | А что значит пост "..."???
Решение нашлось. Подсказал человечек. Вот код:
<script>d=document;closepic=function(){alert(0);}
pic=new Image(); //onload нет надобности задавать, признак !pic.width||!pic.height хорошо работает
function bigpic(newsrc, title) {
var div1 = d.getElementById('d1');
if(newsrc)pic.src=newsrc; //загрузка картинки или продолжение после ожидания
if(!pic.width||!pic.height){setTimeout('bigpic(0,"'+title+'");',10);return;}
var picw, pich; //инициация переменных высоты и ширины большой картинки
picw=pic.width;pich=pic.height;
var bod=d.body; //var x = d.getElementById('close');
var win_x=bod.clientWidth;
var win_y=bod.scrollTop;
div1.style.width=picw;div1.style.height=pich;
var divc=div1.innerHTML;
var newtext='<span id=close onclick="closepic();" style="float: right;">[X]</span><div id=bigpic_tit>'+title+'</div><img src='+newsrc+' id=pic1><br>'+pic.width+' '+pich;
div1.innerHTML=newtext; /*if (x) {x.style.width=picw;}*/
div1.style.left=(win_x/2-picw/2);
div1.style.top=(win_y+bod.clientHeight/2-pich/2);
}</script>
<body><a href=# onclick=bigpic('snow.gif','snowwww');return!1>показать картинку</a><br><div id=d1 style="position:absolute;border:1px solid #999">222</div>
|
А работающий код здесь:
http://anime.insyss.ru/galery/
Всем спасибо за помощь | |
| |
|
|
