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.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2005
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Check if Image is Loaded?

    I've got a function that runs after an image is loaded. The only problem is, if the image is loaded already, the .onload doesn't register so the function doesn't run. Is there a way to check if the image is loaded already?

    Code:
    var img = new Image();
    img.src = "http://example.net/picture.jpg";
    img.onload = showImage;

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,495
    Thanks
    3
    Thanked 500 Times in 487 Posts
    var img = new Image();
    img.onload = showImage;
    img.src = "http://example.net/picture.jpg";
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    Apr 2005
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts
    vwphillips:

    I should rephrase. Is there any way to determine whether or not the browser has cached an image? If not, is there any way to clear or destroy an image from the browser's cache?

    I'm sure one doesn't have to actually access browser preferences to fool the browser into thinking an image isn't cached.

    Upon further investigation, it seems my dilemma lies only in Safari. If the image is already loaded or in the cache, onload is ignored. Normally this wouldn't be that much of a problem, but my site needs to preload the images before they are displayed.

  • #4
    New Coder
    Join Date
    Apr 2005
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have done one thing to limit the problem, but it still can't be classified as a solution.

    When an image is loaded, it adds the image name to an array. Every time it gets ready to load a new image, it checks to see if it's in the array first. If it is in the array, it skips the loading.

    However, as the browser's cache is not cleared when the user exits the page, any visit after the first will result in an attempt to load the image again, which doesn't cause the function to be executed.

    No ideas? Please?

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,590
    Thanks
    0
    Thanked 644 Times in 634 Posts
    There are plenty of browsers out there that don't support image.onload at all so that code wont work there either. The only cross browser method I have found to test if an image is loaded is to test if the width or height of the image is greater than zero. If you set width and height in the HTML then you need to take a copy of the image and test that instead.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Regular Coder
    Join Date
    Mar 2006
    Posts
    726
    Thanks
    35
    Thanked 132 Times in 123 Posts
    This usually works, but you need a belt and suspenders:

    var pic=new Image(x,y);//x,y is optional
    pic.src= //path;

    if(pic.complete) donePic()
    else pic.onload= donePic;

    The suspenders would be a timer that uses felgall's test
    Last edited by mrhoo; 04-11-2006 at 05:00 PM.

  • #7
    New Coder
    Join Date
    Apr 2005
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you, mrhoo!

    That's awesome. Fixes a ton of problems and I haven't run into any browser incompatibility yet.


  •  

    Posting Permissions

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