[TYPO3] Newbie problem with images load sequence

[Steen Suurballe]

Hi!

 

I have a problem with the current scenario :

 

I have a page which list 400 names. 

Idea is when you move your mouse pointer over the name, an image of the
person is shown.

 

>From a training-session I have part of the "working" code below. 

Problem is : Loading the page takes forever (15-20 secs) due to all

images are loaded before any displaying
($this->getFieldContent('pers_image') retrieves image from disk, gets
all 400 at startup)

 

Does anybody have a nice solution so images are only loaded when
actually the "trigger onMouseOver fires" ?!

 

Any help much appreciated because im really stuck trying different
things that does not work

 

 

 

Part of code:

 

           if($this->getFieldContent('fn_list')) {

           $ImageBoxId =
'imagebox-'.$this->internal['currentRow']['uid'];

           /* Image is initial loaded, causing bad startup tim*/

           $ImageBox = '<div id="'.$imageBoxId.'" style="display: none;
background: yellow; border: 2px solid black; position: absolute;
margin-left: none; padding:
none;">'.$this->getFieldContent('pers_image').'</div>';

           $imageOverJS =
'document.getElementById(\''.$imageBoxId.'\').style.display=\'block\';';

           $imageOutJS =
'document.getElementById(\''.$imageBoxId.'\').style.display=\'none\';';

           } else {

             $imageBox = '';

           }

 

 

           return '<tr'.($c%2 ? $this->pi_classParam('listrow-odd') :
$this->pi_classParam('listrow-even')).'>          

                                            <td
onMouseOver="'.$imageOverJS.'" onMouseOut="'.$imageOutJS.'"
valign="top">'.$this->getFieldContent('fn_list').$imageBox.'</td>     

 

Thanx in advance

 

Steen Suurballe