HTML order load...
- Started
- Last post
- 6 Responses
- must_dash
I have a big page of images in an html page, how can i control the order in which they load... e.g If I scroll down to image 20, when only 4 images have loaded, how do I make image 20 the next priority to load?
Is there a jquery type thing for doing this?
- dibec0
or this ...
<html>
<head>
<script language="JavaScript"><!--
var theImage = new Array('im1.gif','im2.gif','im3.gif');
var loaded = false;function loadNext(imageName, image2Load) {
if (!document.images || !loaded) return; // images not supported
document.images[imageName].src = theImage[image2Load];
}
//--></script></head>
<body onLoad="loaded=true; loadNext('image0',0);">
<IMG SRC="blank.gif" NAME="image0" onLoad="loadNext('image1',1);">
<IMG SRC="blank.gif" NAME="image1" onLoad="loadNext('image2',2);">
<IMG SRC="blank.gif" NAME="image2">
</body></html>
- must_dash0
hmm excellent.. thank you
- monNom0
I'm not sure the code above will do what you're asking want... looks more like a preloader.
if you want something like: http://butdoesitfloat.com/
You need to load images dynamicly only once the image is in view, otherwise you run the risk of a big long queue ahead of the image you need. Jquery might help, but you ought to know a bit of javascript to do it.
1) parse page for images, capture src, and height parameters in an object and plug into an array.
2) do something to disable those images so they don't load. (eg: change the src value.)
in runtime
3) on scrol: calculate current scroll height, then loop through your array, adding the height of each image and testing to see if that value is greater than the scroll height. If so, switch out the SRC of the image at that index with the proper one from your array and the image will load.pretty rough, but ought to work.
- noiseisthis0
like this? http://www.appelsiini.net/projec…
- must_dash0
Thanks MonNom,
Yeah, thats how I do it in Flash, although a lot easier... I start at image 1 and start loading through... once the user has moved off that area I then start from where they are currently viewing, and continue loading through... then loop back and pick up all the images from before.
Pretty much your number 3 on there... whereby I switch out the source, as my cms holds all the values for the dimensions, and I just pump out the page via php.
Cheers :)