Topic awaiting preservation: image preload .onerror = stop loading? (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=8945" title="Pages that link to Topic awaiting preservation: image preload .onerror = stop loading? (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: image preload .onerror = stop loading? <span class="small">(Page 1 of 1)</span>\$

smonkey Paranoid (IV) Inmate From: Northumberland, England Insane since: Apr 2003	posted 11-17-2003 00:18 Hi, I have various sets of images, the images in each set are numbered sequentially starting at 0 and going up to any number. So I could make a preloader that just looped thru a preload function, incrementing the the image name/number each cycle. Great, but the images stop at some point so the function would keep trying to load non-existent images which isn't good. So I was thinking that the preloader could be set to stop loading images when the current image in the loop fails to load (caught using the onerror event). In this way it would work great in theory, but I am unsure about how the onerror event is used effectively so anybody have any ideas on how to construct something like this? Thanks, Jon visit my CryoKinesis Online Gallery
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 11-17-2003 19:34 If your image file names are in an array, just use the .length property of arrays to find out how many there are.
smonkey Paranoid (IV) Inmate From: Northumberland, England Insane since: Apr 2003	posted 11-17-2003 23:10 Hi slime, I'm afraid they are not in an array. Basically it works something like this: not real code for (i=0; i < i+1; i++ ) { image.preload( i + '.jpg' ) image.onerror = break() } any ideas how to put that into real working code? visit my CryoKinesis Online Gallery
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 11-17-2003 23:13 That won't work, because the onerror function can't be called until the current code stops executing, and if you don't know when to stop the loop, it will never stop running; the browser will freeze and the onerror event will never be called. I believe you have to put the number of images in your code as a variable. You could possibly have a server side script figure out how many images there are and output the appropriate JS code.
RoyW Bipolar (III) Inmate From: Insane since: Aug 2001	posted 11-18-2003 04:54 Hi, Not posted here for a while but I thought this might be usefull. The following code has an "onerror" handler but you don't really need it. What it does is, onload of a valid image -> increment count and load the next image. code: <html> <head> <script> var loadImg; var currImg = -1; function preloadNext() { currImg++; var picName = currImg + ".jpg"; loadImg = new Image() loadImg.onerror = preloadError; loadImg.onload = preloadNext; loadImg.src=picName; window.status="Loading : " + picName; } function preloadError() { window.status = "Loaded " + currImg + " Images"; } </script> </head> <body onload="preloadNext()"> </body> </html> JavaScript-FX
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 11-18-2003 05:19 That's clever. I'm not sure if it's 100% efficient, since it may be faster to download images in parallel rather than one at a time, but I've never tested it. Keep in mind that if one of the images for some reason fails to load, you won't preload any of the remaining images in the folder. There's also the disadvantage that this will produce at least one 404 error every time someone visits the page. But otherwise, it should work.
poi Paranoid (IV) Inmate From: France Insane since: Jun 2002	posted 11-18-2003 06:42 Here comes a routine inspired by RoyW, with a retry procedure code: maxRetry = 50 preloadArray = [] function checkPreload() { for( i=0; i<preloadArray.length; i++ ) { newImg = document.createElement( "IMG" ) newImg.src = preloadArray[ i ].src document.body.appendChild( newImg ) } } function preloadNext( retry ) { if( retry ) { window.status = preloadArray[ preloadArray.length-1 ].src +" << retry #"+ retry preloadArray.length-- if( retry==maxRetry ) return checkPreload() } currentImage = preloadArray.length src = "img/"+ currentImage +".png" preloadArray[ currentImage ] = new Image() preloadArray[ currentImage ].onerror = eval( "new Function( 'setTimeout( \"preloadNext( "+ (retry+1) +" )\",10 )' )" ) preloadArray[ currentImage ].onload = eval( "new Function( 'setTimeout( \"preloadNext( 0 )\",10 )' )" ) preloadArray[ currentImage ].src = src } The eval( "new Function( 'setTimeout( \" ... \",10 )' )" ) are ugly, but if I use a direct call instead of a setTimeout the recursion can bring a Stack Overflow. I've tested that piece of code with success in IE6.0, FB0.7 and NN4.79 ( except the // display the images to check part which uses the DOM and I was too lazy to port it to the oldschool way ) [EDIT] If you don't feel comfy to use the eval( "new Function( 'setTimeout( \" ... \",10 )' )" ), you could put the retry variable in global and create 2 functions to handle the events : code: maxRetry = 50 retryCount = 0 preloadArray = [] function checkPreload() { for( i=0; i<preloadArray.length; i++ ) { newImg = document.createElement( "IMG" ) newImg.src = preloadArray[ i ].src document.body.appendChild( newImg ) } } function onloadFunction() { retryCount = 0 setTimeout( preloadNext, 10 ) } function onerrorFunction() { retryCount++ window.status = preloadArray[ preloadArray.length-1 ].src +" << retry #"+ retryCount preloadArray.length-- if( retryCount<maxRetry ) setTimeout( preloadNext, 10 ) else checkPreload() } function preloadNext( ) { currentImage = preloadArray.length preloadArray[ currentImage ] = new Image() preloadArray[ currentImage ].onerror = onerrorFunction preloadArray[ currentImage ].onload = onloadFunction preloadArray[ currentImage ].src = "img/"+ currentImage +".png" } [/EDIT] Hope that helps. Mathieu "POÏ" HENRI [This message has been edited by poi (edited 11-18-2003).]
smonkey Paranoid (IV) Inmate From: Northumberland, England Insane since: Apr 2003	posted 11-18-2003 17:19 Poi, if ever there was a man, then that man would be you Nice bit of code there, I like it. Cheers guys.

Topic awaiting preservation: image preload .onerror = stop loading? (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=8945" title="Pages that link to Topic awaiting preservation: image preload .onerror = stop loading? (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: image preload .onerror = stop loading? <span class="small">(Page 1 of 1)</span>\$

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted 11-17-2003 00:18

Hi,

I have various sets of images, the images in each set are numbered sequentially starting at 0 and going up to any number.

So I could make a preloader that just looped thru a preload function, incrementing the the image name/number each cycle.

Great, but the images stop at some point so the function would keep trying to load non-existent images which isn't good. So I was thinking that the preloader could be set to stop loading images when the current image in the loop fails to load (caught using the onerror event). In this way it would work great in theory, but I am unsure about how the onerror event is used effectively so anybody have any ideas on how to construct something like this?

Thanks,

Jon

visit my CryoKinesis Online Gallery

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 11-17-2003 19:34

If your image file names are in an array, just use the .length property of arrays to find out how many there are.

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted 11-17-2003 23:10

Hi slime, I'm afraid they are not in an array. Basically it works something like this:

*not real code*

for (i=0; i < i+1; i++ ) {

image.preload( i + '.jpg' )

image.onerror = break()

}

any ideas how to put that into real working code?

visit my CryoKinesis Online Gallery

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 11-17-2003 23:13

That won't work, because the onerror function can't be called until the current code stops executing, and if you don't know when to stop the loop, it will never stop running; the browser will freeze and the onerror event will never be called.

I believe you have to put the number of images in your code as a variable. You could possibly have a server side script figure out how many images there are and output the appropriate JS code.

RoyW
Bipolar (III) Inmate

From:
Insane since: Aug 2001

posted 11-18-2003 04:54

Hi,
Not posted here for a while but I thought this might be usefull.
The following code has an "onerror" handler but you don't really need it. What it does is,
onload of a valid image -> increment count and load the next image.

code:

<html>

<head>

<script>

var loadImg;

var currImg = -1;

function preloadNext()

{

	currImg++;

	var picName = currImg + ".jpg";

	loadImg = new Image()

	loadImg.onerror = preloadError;

	loadImg.onload = preloadNext;

	loadImg.src=picName;



	window.status="Loading : " + picName;

}

function preloadError()

{

	window.status = "Loaded " + currImg + " Images";

}



</script>

</head>

<body onload="preloadNext()">

</body>

</html>

JavaScript-FX

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 11-18-2003 05:19

That's clever. I'm not sure if it's 100% efficient, since it may be faster to download images in parallel rather than one at a time, but I've never tested it.

Keep in mind that if one of the images for some reason fails to load, you won't preload any of the remaining images in the folder. There's also the disadvantage that this will produce at least one 404 error every time someone visits the page. But otherwise, it should work.

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted 11-18-2003 06:42

Here comes a routine inspired by RoyW, with a retry procedure

code:

maxRetry = 50

preloadArray = []

function checkPreload()

{

    for( i=0; i<preloadArray.length; i++ )

    {

        newImg = document.createElement( "IMG" )

        newImg.src = preloadArray[ i ].src

        document.body.appendChild( newImg )

    }

}

function preloadNext( retry )

{

    if( retry )

    {

        window.status = preloadArray[ preloadArray.length-1 ].src +" << retry #"+ retry

        preloadArray.length--

        if( retry==maxRetry )

            return checkPreload()

    }

    currentImage = preloadArray.length

    src = "img/"+ currentImage +".png"

    preloadArray[ currentImage ]         = new Image()

    preloadArray[ currentImage ].onerror = eval( "new Function( 'setTimeout( \"preloadNext( "+ (retry+1) +" )\",10 )' )" )

    preloadArray[ currentImage ].onload  = eval( "new Function( 'setTimeout( \"preloadNext( 0 )\",10 )' )" )

    preloadArray[ currentImage ].src     = src

}

The eval( "new Function( 'setTimeout( \" ... \",10 )' )" ) are ugly, but if I use a direct call instead of a setTimeout the recursion can bring a Stack Overflow.

I've tested that piece of code with success in IE6.0, FB0.7 and NN4.79 ( except the // display the images to check part which uses the DOM and I was too lazy to port it to the oldschool way )

[EDIT]

If you don't feel comfy to use the eval( "new Function( 'setTimeout( \" ... \",10 )' )" ), you could put the retry variable in global and create 2 functions to handle the events :

code:

maxRetry = 50

retryCount = 0

preloadArray = []

function checkPreload()

{

    for( i=0; i<preloadArray.length; i++ )

    {

        newImg = document.createElement( "IMG" )

        newImg.src = preloadArray[ i ].src

        document.body.appendChild( newImg )

    }

}

function onloadFunction()

{

    retryCount = 0

    setTimeout( preloadNext, 10 )

}

function onerrorFunction()

{

    retryCount++

    window.status = preloadArray[ preloadArray.length-1 ].src +" << retry #"+ retryCount

    preloadArray.length--

    if( retryCount<maxRetry )

        setTimeout( preloadNext, 10 )

    else

        checkPreload()

}

function preloadNext( )

{

    currentImage = preloadArray.length

    preloadArray[ currentImage ]         = new Image()

    preloadArray[ currentImage ].onerror = onerrorFunction

    preloadArray[ currentImage ].onload  = onloadFunction

    preloadArray[ currentImage ].src     = "img/"+ currentImage +".png"

}

[/EDIT]

Hope that helps.

Mathieu "POÏ" HENRI

[This message has been edited by poi (edited 11-18-2003).]

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted 11-18-2003 17:19

Poi, if ever there was a man, then that man would be you

Nice bit of code there, I like it.

Cheers guys.