SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast vladanik's Avatar
    Join Date
    Oct 2001
    Location
    Belgrade, Serbia
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Detect if images are loaded

    Hi,

    How do I detect if a couple of images on my page are loaded? I must somehow detect if those images are loaded and if possible, stop the visitor from doing anything until they are loaded.

  2. #2
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're pre-loading the images in your onLoad() event, I don't know how the visitor would be able to do anything until your images have been loaded.

  3. #3
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    just use the onload or onerror

    <img src="anImage.gif" onload="doFunction()" onerror="doOtherFunction()">

    If you use these, neither gets executed until the page has fully loaded. So if you use it to change an image or data, make sure it can read it after the page has loaded.
    Using loops will create problems because they finish before the page has loaded, so it will take the last number, but these problems can be overcome.



    hope it helps
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  4. #4
    SitePoint Member
    Join Date
    Feb 2003
    Location
    UK
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's another handler you need to handle - that's "onabort"

    There is a '.complete' attribute on an Image object which is there for exactly what you're trying to do. Sadly and rather predictably, Inepternet Explorer supports it but doesn't set it properly, while Netscape 4 to Moz 1.3b all set it correctly:

    http://msdn.microsoft.com/workshop/a...s/complete.asp

    Code:
    <html><body>
    <script language="JavaScript">
    tellme=function(){alert("The image '"+this.src+"' complete: "+this.complete)}
    var im = new Image();
    im.onerror = im.onload = im.onabort = tellme;
    im.src="http://homepage.ntlworld.com/thepiglet/images/piglet.gif";
    </script>
    </body>
    </html>
    Last edited by Piglet; Feb 22, 2003 at 13:04.


Bookmarks

Posting Permissions

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