kurt.santo Posted October 22, 2007 Share Posted October 22, 2007 I use the following JavaScript for a nice image swap and to preload the relevant images: <script type="text/javascript">if (document.images) {image0 = new Image;image1 = new Image;image2 = new Image;image0.src = '1-<?php echo $_GET['id']; ?>.gif';image1.src = '2-<?php echo $_GET['id']; ?>.gif';image2.src = '3-<?php echo $_GET['id']; ?>.gif';} else {image0 = '';image1 = '';image2 = '';document.rollimg = '';} </SCRIPT> I have also planned to add a button underneath the main image to open a pop-up with an even bigger size of the picture displayed in the main picture area. How would it best to preload those three pictures? Inside the pop-up function? Also, usually I use "onClick="return popup(this, 'windowName')" to open a pop-up, which is called from inside the <a> tag. This time I would like to avoid creating a lot of files just to place the image inside, but still I would like to have a nice padding of 20px around and a close button. How would I code this in JavaScript? I hope I expressed clearly what I am after...KurtKurt Link to comment Share on other sites More sharing options...
justsomeguy Posted October 23, 2007 Share Posted October 23, 2007 I don't think you should preload everything. Someone might not even want to look at the full-size image, so you don't want them to have to sit there and have slower bandwidth while their browser downloads an image they aren't going to look at. Preloading the full-size images isn't going to save a lot of time, if someone wants to look at the full-size image they are going to click to jump right to it without looking much at the others. It might take them only a couple seconds to get there, that won't be enough time to load all of the images so they are still going to wait and watch it load normally. There's just not a really good argument towards having people preload large files that they may or may not want, especially when the available bandwidth is limited. For someone on dialup your site is going to respond really slowly while they download everything all at once. It would probably be better to only preload the interface graphics, thumbnails (if practical), and maybe the medium size images, if they aren't too large. But anyone clicking on a full-size image isn't going to necessarily expect it to just pop right up, they will understand if there is a delay while they load the full-size image. Link to comment Share on other sites More sharing options...
kurt.santo Posted October 23, 2007 Author Share Posted October 23, 2007 justsomeguy,That makes total sense. I will take up your advice (as usual:-)). Had to edit my post as I realised I talked complete nonsense. So, would you reckon I have to preload thumbs or main images then? And if yes: I found the following preloader function simplePreload(){var args = simplePreload.arguments;document.imageArray = new Array(args.lenght);for(var i=0;i<args.length;i++){ document.imageArray[i]=new Image; document.imageArray[i].src=args[i]; }} How would you incorporate the function in the script block in header of htm file? Would you put: <script type="text/javascript">function simplePreload(){var args = simplePreload.arguments;document.imageArray = new Array(args.lenght);for(var i=0;i<args.length;i++){ document.imageArray[i]=new Image; document.imageArray[i].src=args[i]; }}if (document.images) {image0 = new Image;image1 = new Image;image2 = new Image;image0.src = '1-<?php echo $_GET['id']; ?>.gif';image1.src = '2-<?php echo $_GET['id']; ?>.gif';image2.src = '3-<?php echo $_GET['id']; ?>.gif';} else {image0 = '';image1 = '';image2 = '';document.rollimg = '';} </SCRIPT> and then call it inside of body tag as "<body onLoad="return simplePreload('picture1.jpg','picture2.jpg' etc)">"? Is there a way to simulate a really slow internet connection? In Flash for example you can show streaming and set the spead, so you can test your preloader.Kurt Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.