[TYPO3] Newbie problem with images load sequence

[Tristan Knapp]

Create a javascript which contains the name of the image file as a link 
(don't preload the images...). Then load the file in a generic javascript 
function. You could also preload afterwards. Use Typo3 to create the list of 
images - then it is a simple javascript issue.

If you use an array of images in javascript you could also then simply 
asynchronously load the images after the HTML-page has loaded to improve the 
mouse-over performance...

"Steen Suurballe" <SS at tips.dk> schrieb im Newsbeitrag 
news:mailman.540.1149677625.17090.typo3-english at lists.netfielders.de...
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