Прелоуд картинок не работает в Опере

[Arseo]

Помогите, пожалуйста, все перепробовал, не могу докопаться в чем дело!

В общем, был написан скрипт хитрой предзагрузки картинок для галереи. Надо было, чтобы сначала загружались только первые две картинки, а остальные картинки загружались по одной по очереди при нажатии кнопки "Вниз".

Проблема в том, что скрипт работает в FF и IE, но не работает в Опере. В Опере загружаются только 2 первые картинки и все.

Код скрипта (я в js новичок, наверное, скрипт написан через ж.. но - работает):

<script language="javascript" type="text/javascript">
// images preload

function def_img_src (npreload)
{
img_html_name = eval ("img_html" + npreload);
var src_array = new Array();
src_array = img_html_name.split('src="');
src_array = src_array[1].split('"');
var img_src = src_array[0];
return img_src;
};

function hitr_preload(npreload)
{
     nnn = npreload+1;
     var img_html_name = new Array();
     var hiddenImgNumber = new Array();
     img_html_name[npreload] = eval ("img_html" + nnn);
     hiddenImgNumber[npreload] = new Image();
     hiddenImgNumber[npreload].src= def_img_src (npreload+1);
     hiddenImgNumber[npreload].onload = function() {document.getElementsByTagName('li')[npreload].getElementsByTagName('td')[1].innerHTML = img_html_name[npreload];}
     // 	возвращает контент второго td внутри (npreload+1)-го li в документе.

};

var npreload=1;

</script>

На странице следующая картина (там еще код для jCarousel - частично убрал для простоты восприятия):

<div onClick="npreload++; hitr_preload(npreload);"><a href="javascript:void(0)">Вниз</a></div>

      <ul class="jcarousel-list">
<li class="jcarousel-item-1">
<table style="text-align: right; width: 708px; height: 491px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="354">
<table style="height: 491px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><img title="Ornella." src="/img/gallery/2.jpg" alt="Ornella." width="354" height="489" name="img1" onLoad="hitr_preload(npreload)" /></td>
</tr>

</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</li>


<li class="jcarousel-item-2">

<table style="text-align: right; width: 708px; height: 491px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="354">
<table style="height: 491px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>

<td><script language="javascript" type="text/javascript">var img_html2 = '<img style="width: 354px; height: 491px;" title="Iside." src="/img/gallery/1.jpg" alt="Iside." width="354" height="491" />';</script></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</li>

<li class="jcarousel-item-3">
...
</li>
...
</ul>

[Kolyaj]

События onload у картинки устанавливайте до установки src.

[Arseo]

Kolyaj, спасибо за ответ.
Переписал так, но, к сожалению, не помогло:

<script language="javascript" type="text/javascript">
// images preload
 
function def_img_src (npreload)
{
img_html_name = eval ("img_html" + npreload);
var src_array = new Array();
src_array = img_html_name.split('src="');
src_array = src_array[1].split('"');
var img_src = src_array[0];
return img_src;
};
 
function hitr_preload(npreload)
{
     nnn = npreload+1;
     var img_html_name = new Array();
     var hiddenImgNumber = new Array();
     img_html_name[npreload] = eval ("img_html" + nnn);
     hiddenImgNumber[npreload] = new Image();
     hiddenImgNumber[npreload].onload = function() {document.getElementsByTagName('li')[npreload].getElementsByTagName('td')[1].innerHTML = img_html_name[npreload];}
     //     возвращает контент второго td внутри (npreload+1)-го li в документе.
     hiddenImgNumber[npreload].src= def_img_src (npreload+1);
 
};
 
var npreload=1;
 
</script>

[Arseo]

Уф, разгребся, вроде. Перепробовал кучу способов, так и не понял, правда, почему некоторые работают, а некоторые - нет (хотя в похожих случаях у других работало).

Заработало, когда поменял

hiddenImgNumber[npreload].onload = function() {document.getElementsByTagName('li')[npreload].getElementsByTagName('td')[1].innerHTML = img_html_name[npreload];}

на

if (hiddenImgNumber[npreload].complete) {document.getElementsByTagName('li')[npreload].getElementsByTagName('td')[1].innerHTML = img_html_name[npreload];};

При этом заработало в Опере, но перестало работать в IE. Поэтому порылся в инете и добавил еще

// IE:
   hiddenImgNumber[npreload].onreadystatechange = function() {
      if(this.readyState == "loaded"  || this.readyState == "complete") 
      {
      document.getElementsByTagName('li')[npreload].getElementsByTagName('td')[1].innerHTML = img_html_name[npreload];
      }
   };

В итоге получился такой скрипт, который работает в FF, IE и Opera:

<script language="javascript" type="text/javascript">
// images preload

function def_img_src (npreload)
{
img_html_name = eval ("img_html" + npreload);
var src_array = new Array();
src_array = img_html_name.split('src="');
src_array = src_array[1].split('"');
var img_src = src_array[0];
return img_src;
};

function hitr_preload(npreload)
{
     nnn = npreload+1;
     var img_html_name = new Array();
     var hiddenImgNumber = new Array();
     img_html_name[npreload] = eval ("img_html" + nnn);
     hiddenImgNumber[npreload] = new Image();

// FF and Opera:
if (hiddenImgNumber[npreload].complete) {document.getElementsByTagName('li')[npreload].getElementsByTagName('td')[1].innerHTML = img_html_name[npreload];};
     // 	возвращает контент второго td внутри (npreload+1)-го li в документе.

// IE:
   hiddenImgNumber[npreload].onreadystatechange = function() {
      if(this.readyState == "loaded"  || this.readyState == "complete") 
      {
      document.getElementsByTagName('li')[npreload].getElementsByTagName('td')[1].innerHTML = img_html_name[npreload];
      }
   };

     hiddenImgNumber[npreload].src= def_img_src (npreload+1);

};

var npreload=1;

</script>