Jump to content

Pop-up preload


kurt.santo
 Share

Recommended Posts

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

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...