[Nico]

I wrote this script to preload images

<script type="text/javascript">
    <!-- Preload images
    window.onload = function() 
    {
        var imageObj = new Image();
        var images = new Array();
         
        images[0] = "images/1_p1290331.jpg";
        images[1] = "images/1_p1290330.jpg";
        images[2] = "images/1_p1290329.jpg";
        images[3] = "images/1_p1290320.jpg";
        images[4] = "images/1_p1290312.jpg";
        images[5] = "images/1_p1290311.jpg";
        images[6] = "images/1_1145093276_P1290320.JPG";
        images[7] = "images/1_p1290314.jpg";
                
        for (i = 0; i < images.length; i++) 
        {
            imageObj.src = images[i];
        }
    } 
    //-->
    </script> 

Somehow does it not seem like it's preloading anything. When I click on the thumbnail should the big image (which should be preloaded) appear in a div. This works, the only thing is that the images still take a while to load. Any ideas?

[jfulton]

I'm not terribly familiar with preloading images...I'm assuming that if you just load the image, it will be cached and load quickly no matter how you try to access it? (ie. you don't have to access it via the javascript object because the image source is already in memory.)

If that's the case, then chances are you are not giving your images time to load in your for loop. Would this work?

for (i = 0; i < images.length; i++) 
        {
            var imageObj = new Image();
            imageObj.src = images[i];
        } 

Another question...does the window.onload event always occur before body.onload? All of the images should be loaded beforehand, right?

[TwoD]

I think you need to keep an image-object for each of your images in memory for it to work best. That way the browser shouldn't first have to check the memory and find out it's not there, then the cache. But then again, I don't know if that's what it does at all...
Also make sure the browser doesn't try to use any of the preloaded images before they have been completely preloaded, otherwise they'll be downloaded again.

<!-- Preload images
    window.onload = function() 
    {
        var imgObj,images = ["images/1_p1290331.jpg",
        "images/1_p1290330.jpg",
        "images/1_p1290329.jpg",
        "images/1_p1290320.jpg",
        "images/1_p1290312.jpg",
        "images/1_p1290311.jpg",
        "images/1_1145093276_P1290320.JPG",
        "images/1_p1290314.jpg"]
                
        for (i = 0; i < images.length; i++) 
        {
            imgObj = new Image();
            imgObj.src = images[i];
            images[i] = imgObject;
        }
    } 
    //-->
    </script> 

EDIT: Forgot Image() only takes width and height as parameters.

[mahmoud82]

hi
i try to use this code but it does not work with me. can u explain to me how can i use it.
and onther thing when i create a js code and i want from php to send an array to js, is this possible.

[TwoD]

Do you get any errors? If so, please quote all of the error text and include the whole page, otherwise it's a bit hard to help fix it.
Do you have a testpage online where you tried using it? Then it'd be even easier since we could see what's going on in a "live" environment.

Also note that I wrote that last piece of code off the top of my head so I'm not sure if it actually does what it's supposed to. Correctly preloading images is a bit tricky in some circumstances...


If you want to create a JS Array from PHP, just echo it out to the page using normal JS syntax while it's being constructed by the server.
When finished, the Arrray should look something like:

var myArray = ["Entry 1","Entry 2","Entry 3","Entry 4"] 

[nova912]

I tried the same type of system you did, in the end i had to settle for the traditional way of...

image1 = new Image()
image1.src = 'images/img1.png';

image2 = new Image()
image2.src = 'images/img2.png';

/shrug

[TwoD]

nova, do you have a testpage with the nonworking system?
Any errors etc?

It would be great if we could figure out why it doesn't work.

[nova912]

I honestly think this is the reason....

It tries to go to the next loop before the image had loaded - this then interrupts the pre-loading of the previous image and so on and so on, I never got an error in IE/Safari/or fire fox. It's the only thing I could think of.

I deleted my code (b/c i did not work) but it looked like that if I remember correctly.

EDIT:

I even tried creating new object i knew would not get written over by storing them in an array like so... (this did not work either)

var paths = ['asd0.jpg','asd1.jpg','asd2.jpg'];
var images = Array();
for(var i=0;i<paths.length;i++)
{
images[i] = new Image();
images[i].src = paths[i];
} 

I settled on a PHP solution

PHP Code:

function preLoadImages($images)
{
$output = '// Pre Load Images';
$num = count($images);
for($i=0;$i<$num;$i++)
{
$output .= "\r\n".'image'.$i.' = Image();'."\r\n".'image'.$i.'.src = "'.$images[$i].'"'."\r\n";
}
return $output;
}
$images = array('asd0.jpg','asd1.jpg','asd2.jpg');
$js .= preLoadImages($images); 

[Nico]

Originally Posted by nova912

I honestly think this is the reason....

It tries to go to the next loop before the image had loaded - this then interrupts the pre-loading of the previous image and so on and so on, I never got an error in IE/Safari/or fire fox. It's the only thing I could think of.

If that's the case, wouldn't something like this work?

var images = ['image1.jpg', 'image2.jpg'];
var loadcount = 0;
 
function preload()
{
    var image = new Image();
    image.src = images[loadcount];
    
    image.onload = function()
    {
        if (loadcount < images.length)
        {
            loadcount++;
            preload();
        }
    }
}
 
window.onload = preload; 

(Completely untested, just an idea...)

[nova912]

Maybe, i never tried it. Give it a shot =X