Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Как убедиться в полной загрузке картинки?


Автор: SHAmanovi4 24.11.2006, 15:31
Люди, помогите. Не знаю как решить задачку:

По определенному событию начинаю грузить картинку. Мне нужно узнать ширину и высоту этой картинки.

Вот код:
Код

var pic=new Image();
pic.src=newsrc;    //инициация загрузки большой картинки
var picw, pich;    //инициация переменных высоты и ширины большой картинки
pic.onload=function() {picw=pic.width; pich=pic.height; alert('картинка загрузилась');}    //определение момента загрузки большой картинки
alert(picw+', '+pich);    //вывод ширины и высоты большой картинки после ее загрузки.


Проблема в том, что ширина и высота картинки так и не определяются. Что-то я не то делаю. Как убедиться в том, что картинка загружена полностью и только тогда брать ширину и высоту? Сейчас у меня и то и то становится undefined smile 

Помогите пожалуйста

Автор: griker 24.11.2006, 15:41
Код

<img src="images.jpg" onLoad="alert('Width: ' + this.width + ' Height: ' + this.height);">

Автор: SHAmanovi4 24.11.2006, 15:44
Неее... У меня картинки пока что нет. Т.е. хтмл-кода вообще нет. Он генерируется после загрузки картинки. Т.е. у меня, грубо говоря, пустая страница. А когда я запускаю скрипт, начинает догружаться картинка. Мне, скажем, нужно ее поместить в div. Для этого мне нужно задать диву размеры, равные размерам картинки. Собственно вот. Так как вы предложили - не подходит. Картинка выводится гораздо позже того, как мне нужны ширина и высота.

Автор: SelenIT 24.11.2006, 16:08
SHAmanovi4, так перенесите второй alert и все, что нуждается в переменных picw, pich внутрь той функции, которая onload объекта Image(). Скрипт же не становится на паузу от самого факта назначения обрабочика...

Автор: 12345c 24.11.2006, 16:14
Код
a=new Image();
a.src='snow21.gif'
a.onload=function(){alert([a.width,a.height]);}
Это как-то нестабильно работало в IE, поэтому нормально выводится так:

Код
<script>
a=new Image();
a.src='snow21.gif'</script>
<body onload="setTimeout(&quot;if(a.width&&a.height)document.getElementById('d1').innerHTML=a.width+' '+a.height&quot;,999)">
<div id=d1></div>


Добавлено @ 16:17 
Лучше ww=setInterval(...), а когда определится a.width&&a.height, стереть: cleaRInterval(ww);

Добавлено @ 16:19 
Нет, всё понятно, вот так стабильно работает:
Код
a=new Image();
a.onload=function(){alert([a.width,a.height]);}
a.src='snow21.gif'

Автор: SHAmanovi4 24.11.2006, 16:58
О! Спасибо большое! Заработало! Оказывается, нужно было присваивать src уже после того, как наступил onload! Крутотень... век живи - век учись. Спасибо большое. smile 


......
Блин! Теперь вот какое дело: он при первом клике сообщает об ошибке. Только на второй делает все как полагается...smile 
Вот полный листинг скрипта... не хотел выкладывать, но, похоже, выбора нет.

Код

var d=document;
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;
/*if (x)    {x.style.width=picw;}*/
div.style.left=(win_x/2-picw/2);
div.style.top=(win_y+bod.clientHeight/2-pich/2);
div.style.display='inline';
}

Автор: SelenIT 24.11.2006, 17:26
Цитата(SHAmanovi4 @  24.11.2006,  16:58 Найти цитируемый пост)
нужно было присваивать src уже после того, как наступил onload

Поправочка: не после того, как наступил, а после того, как для него был назначен обработчик. Именно чтобы иметь гарантию того, что onload не успеет "проскочить" необработанным...

Автор: SHAmanovi4 24.11.2006, 17:39
А если я запихаю остатки своей функции (смотри код в моем посте выше), то оно будет работать чтоли... ща попробую...

Автор: 12345c 24.11.2006, 17:48
1) function bigpic(newsrc, title)    {
var div = d.getElementById('bigpic'); - даст ошибку в FF из-за 2 переменных с одинаковым имененем (он считает, что ид - это переменная);

2) возможно, на больших картинках pic.onload=function() {picw=pic.width; pich=pic.height;} не сработает (были такие проблемы, правда, при прорисовке картинки), и тогда надо вставить задержку.

Автор: SHAmanovi4 24.11.2006, 18:02
Цитата(12345c @  24.11.2006,  17:48 Найти цитируемый пост)
var div = d.getElementById('bigpic'); - даст ошибку в FF из-за 2 переменных с одинаковым имененем (он считает, что ид - это переменная);

Во блин! Тупизм... ладно, исправлю. Это не долго....

Господа, пожааааалуйста! Напишите работающий пример! smile  Я в упор не понимаю почему у меня программа идет дальше, не дождавшись выполнения того, что в onload...smile

Автор: 12345c 24.11.2006, 18:13
Действительно, проверил эту программу на локальном хосте в IE - успевает, а в FF - нет. Придётся переделать с задержками. Минут через 5.
Код
<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>
(то, что див не обрамляет рисунок, как задумано - проблема исходного кода smile )

Автор: SHAmanovi4 24.11.2006, 18:38
Во! ОТЛИЧНО! smile Спасибо огромное за оперативность и полноту! Это будет использоваться здесь:

http://anime.insyss.ru/galery

просто хочу нормально чтобы картинки открывались в галерее. Я написал галерею на Perl, хочу ее в свободное плавание запустить. Вот готовлю.

Спасибо еще раз.

Автор: SelenIT 24.11.2006, 18:45
12345c, а в чем все же преимущество периодического вызова по таймауту однократному вызову по Onload?

Автор: SHAmanovi4 24.11.2006, 18:49
Видимо, в том, что onload проскакивал. Попробуйте сделать по onload и по таймауту. По onload мне предлагали делать все. И у меня не получалось. А по таймауту получилось. Можете посмотреть по моей ссылке результат.

сам понимаю что по таймауту не оч хорошо получается - функция висит в памяти. Но что пделать, если так надежнее?

Автор: SelenIT 24.11.2006, 18:54
SHAmanovi4, не знаю, я поэкспериментировал с Вашим кодом с onload, только тупо перенес в него весь код за исключением присвоения src:
Код

var d=document;
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;
   alert(picw,pich)
   var bod=d.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;
   /*if (x)    {x.style.width=picw;}*/
   div.style.left=(win_x/2-picw/2);
   div.style.top=(win_y+bod.clientHeight/2-pich/2);
   div.style.display='inline';
}
pic.src=newsrc;    //...и инициация этой самой загрузки загрузки
}

И никаких проблем в FF не увидел, ни на быстрой локальной загрузке, ни на медленной удаленной. Предлагаю дождаться ответа 12345c...

Автор: 12345c 24.11.2006, 19:00
(Тот же самый эффект значительно проще, без скриптов, получить, если сгенерировать отцентрированную (по горизонтали) таблицу неопределённой ширины и высоты, вставленную в таблицу шириной и высотой 100%, имеющую absolute. Картинка тогда проявится  только после окончания загрузки (т.к. в таблице), а центровку не надо будет вычислять.)

Примерно:
Код
<a href=#>aaa</a>
<table width=100% height=100% border=1 style=position:absolute;top:0;left:0><tr><td align=center>
  <table border=1><tr><td><img src=snow.gif></td></tr></table>
</td></tr></table>

Внешняя таблица без фона не мешает делать клики, что иллюстрируется ссылкой.
...Хотя нет, мешает.

Автор: SelenIT 24.11.2006, 19:08
Имхо, "значительно проще без скриптов" из скрипта все же не получится ;)

Автор: 12345c 24.11.2006, 19:32
Цитата(SHAmanovi4 @  24.11.2006,  18:49 Найти цитируемый пост)
сам понимаю что по таймауту не оч хорошо получается - функция висит в памяти
она не висит в памяти - просто регулярно несколько раз вызывается.


Цитата(SelenIT @  24.11.2006,  18:54 Найти цитируемый пост)
И никаких проблем в FF не увидел
Я тестировал на 1.07, там FF (в моей версии) не успевал выдать правильные размеры, давал (0,0). И, видимо, это где угодно могло случиться, поэтому проверка по таймауту страхует неуспевание.

Кстати, без таймаута уже через несколько операторов FF давал правильные размеры, но на это надеяться, конечно, нельзя.

Автор: SelenIT 24.11.2006, 19:34
12345c, я правильно понимаю, такая беда была с этим вариантом?
Код

a=new Image();
a.onload=function(){alert([a.width,a.height]);}
a.src='snow21.gif'


А если его заменить на такой
Код

a=new Image();
a.onload=function(){alert([this.width,this.height]);}
a.src='snow21.gif'
проблема все равно остается?

Автор: 12345c 25.11.2006, 00:56
Скорее всего, разницы не будет, потому что стоило взять в FF a.width чуть позже без задержек по tomeout, как становилось не 0, а нужное число.

Автор: SHAmanovi4 30.11.2006, 18:24
как это выглядит сейчас:
http://anime.insyss.ru/galery/

И вот какой ща скрипт:
Код

var d=document;

function closepic()    {
d.getElementById('bigpic').style.display='none';
}

function bigpic(newsrc, title)    {
pic=new Image();
var div1 = d.getElementById('bigpic');
if(newsrc) {pic.src=newsrc;}    //загрузка картинки или продолжение после ожидания
if(!pic.width||!pic.height)    {
    setTimeout('bigpic(\''+newsrc+'\',\''+title+'\');',10);
    return;
}
else    {
var picw, pich;    //инициация переменных высоты и ширины большой картинки
picw=pic.width;
pich=pic.height;
var bod=d.body;
var win_x=bod.clientWidth;
var win_y=bod.scrollTop;
div1.style.width=picw;
div1.style.height=pich+17;

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>';
div1.innerHTML=newtext;
div1.style.left=(win_x/2-picw/2);
div1.style.top=(win_y+bod.clientHeight/2-pich/2);
div1.style.display='inline';
}
}


На самом деле, я уже на грани отчаяния. Я логику понимаю, следую за ней и не вижу ошибки. ПОЧЕМУ smile Народ, если поможете - буду ну ОЧЧЧЕНЬ благодарен.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)