Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Jun 2002
    Location
    Caerdydd
    Posts
    59
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Images not preloading

    I am trying to preload images into my document using arrays and a loop:

    doc_images[0] = 'path/image0.jpeg';
    doc_images[1] = 'path/image1.jpeg';
    doc_images[2] = 'path/image2.jpeg';...

    for(i = 0; i<doc_images.length; i++){
    img = new Image()
    img.src = doc_images[i];
    }

    When I open the document though the images are not preloaded. Is there anything else I need to do?

    BL

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    All a 'preloader' does is generate HTTP gets (requests) for the images it references; they still have to download, and the body of the document will be rendering all the while - unless you delay that somehow.

  • #3
    New Coder
    Join Date
    Jun 2002
    Location
    Caerdydd
    Posts
    59
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's what I thought would happen with my code. What actually happens is that the images are only downloaded when the rollover is triggered, which is what I was trying to avoid by preloading.

    Have I misunderstood something here?

    BL

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Looks OK - but I'm guessing that what you've posted is a synopsis, not the actual code; e.g., 'path' - is that a variable name or the actual image directory? Paste in the actual preloader...

  • #5
    New Coder
    Join Date
    Jun 2002
    Location
    Caerdydd
    Posts
    59
    Thanks
    0
    Thanked 0 Times in 0 Posts
    As requested:

    var nm_images = new Array();

    nm_images[0] = 'image1.jpg';
    nm_images[1] = 'image2.jpg';
    nm_images[2] = 'image3.jpg';
    nm_images[3] = 'image4.jpg';
    nm_images[4] = 'image5.jpg';

    //there are another 4 arrays like this one,
    //each array has a loop like this:

    var nm_tags = new Array();

    for (i = 0; i<nm_images.length; i++){
    img = new Image();
    img.src = nm_images[i];
    nm_tags[i] = "<img src=" + nm_images[i] +">";
    }//end for loop

    The rest of the script is functions to fade the images in and out, triggered by mouseover events. That bit works fine, it's only the preloading that's the problem. Waiting for each image to download spoils the transition somewhat.

    Could it be caused by browser settings (e.g. if the user can prevent images being cached)?

  • #6
    New Coder
    Join Date
    Jun 2002
    Location
    Caerdydd
    Posts
    59
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This code is in an external file, that shouldn't make a difference should it?

    BL

  • #7
    New Coder
    Join Date
    Jun 2002
    Location
    yorkshire, uk
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    just an idea....

    is this code in a function?

    it needs to be inline, really.

    try sticking some alerts in to check where your script is going, in case it is somehow not getting to the preload images.

    just while i wrote this i thought of another idea, seems more likely...

    the images are all preloaded into the same variable, img. if this is a local variable i.e. only defined inside the loop, the image will probably be deleted when each run the loop is complete. if it's a public variable i.e. defined outside the loops, all you're doing is repeatedly changing the same image's src. i recommend you make an array and set each item of the array as a new image like this:
    Code:
    var nm_tags = new Array();
    var nm_preloads = new Array();
    
    for (i = 0; i<nm_images.length; i++){
    nm_preloads[i] = new Image();
    nm_preloads[i].src = nm_images[i];
    nm_tags[i] = "<img src=" + nm_images[i] +">";
    }//end for loop
    there are another 4 arrays like this one,
    make sure the other sets of images have different names... obvious really...

    neil.c

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Function or top level, no difference (as long as you call the function in the same block). I don't thing the re-assignment of the variable is an issue - looking into it - as the only purpose of the Image object is to generate the HTTP request; presumably, its .src property isn't being used in a rollover script. Is this a browser-specific issue?

    'External' files are simply read in, at the spot where the HTML tags are embedded - no difference.

  • #9
    New Coder
    Join Date
    Jun 2002
    Location
    Caerdydd
    Posts
    59
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks guys.

    I've looked at other browsers, and the problem seems to be specific to IE. The way I'm testing the code is to have all the code and image files on a floppy disk, open the document, remove the disk (once it's stopped whirring, obviously) and then trigger the animation. This works in Mozilla. I've been to other sites with rollover tutorials to try the same test and their sites fail as well. One thing I've not tried is using the code on a different computer with IE, just in case it's specific to me.

    I've also tried setting up arrays of Image() objects as neil.c suggested, but that hasn't solved it. Using alerts I've been able to establish that the code is being called, but the images aren't being summoned. Some of the tutorials I've looked at put the code in a function called by the onLoad event handler, but that hasn't worked for me either.

    Thanks again,

    BL

    I've now downloaded the page on another computer, and it seems to work OK, though it fails the floppy test. I'd guess from this that the problem is something to do with the network or other software. Any thoughts?
    Last edited by bassleader; 07-24-2002 at 11:08 PM.

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,139
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Bassleader -

    I have exactly the same problem as you have, tried the same remedies, still no joy.

    Anyone have any further thoughts?

  • #11
    New Coder
    Join Date
    Jun 2002
    Location
    yorkshire, uk
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i think this is because of how IE works. it doesn't rely completely on the cache unless you tell it you are 'working offline'. so even if you have preloaded images or downloaded external script files, it likes to connect to the server, maybe just to check if the file is the same as the one it downloaded. for example, i recently tested an image slideshow in IE5, using images uploaded on the net. while i stayed online, IE preloaded the images and then opened them from cache when it needed them, without downloading again. but when my connection cut itself off (as it does occasionally), IE gave me image unavailable placeholders, even though the images were in cache. i guess this is because it tried to connect to the remote server to check that the files exist, or if they are the same version of the files - i don't know.

    anyway, this is my guess why your floppy test fails. it treats the floppy as a remote server, file:///a:/, and even though the images are preloaded, it insists on checking they still exist before showing them. you might try doing a file > work offline before the test, but at any rate it should work if you upload the images.

    any joy?
    neil.c

  • #12
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have a similar problem.
    Works in Netscape not in IE. However, take a look at www.startrek.com in IE.
    They have a menu on the left with mouseover effects. Run your mouse over them and they appear instantly. So IE will preload the images without having to check back with the server.

    I have a similar script. www.flushbus.com but it wont work!!! (it wont pre-load)

    This is totally baffling me and I don't think anyone has been able to solve this problem so if there are any JS masters out there please please solve this one.
    Last edited by jmgww; 07-28-2002 at 12:19 PM.

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,139
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    I am bumping this up as the problem is still unresolved. My page works fine off-line (IE 5.5) but locks up when uploaded and run from the server.

    Anyone can try it at

    www.ogauge.co.uk/lisbonpreloadtest.html

    I have put alerts in this to show how it is working (or not!)

    I guess several people would be very happy if a guru could have a look and offer advice.

    I have just tried it again and it works partially. Is the problem that if the user clicks the NEXT button before the preload of the next image is completed then the preload is aborted?
    Last edited by Philip M; 07-29-2002 at 07:14 AM.

  • #14
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    try setting to 'Automatically' in 'Check for newer versions of stored pages' setting. Maybe your current setting is 'Every visit to the page'
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #15
    New Coder
    Join Date
    Jul 2002
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think neil.c nailed it on his first reply.

    http://wsabstract.com/script/script2/preloadimage.shtml


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •