SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    create image element and onload

    Not sure if this should be in the html forum or not but...

    If I create an image element using the DOM methods and assign it an onload event handler, at what point is the image actually loaded and the event handler run?

    So, given the following and assuming that "parent" references a node already in the document:

    Code:
    var elm = document.createElement("img");
    elm.src = "myuglyface.jpg" // #1
    
    addEvent(elm, "load", myHandler, false); // the standard cross-browser event adding mechanism
    
    parent.appendChild(elm); // #2
    Does the loading of the image begin at #1 or #2, ie when I first reference it or when it is added to the document? Can I even add an event handler at the point I do so?

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I create an image element using the DOM methods and assign it an onload event handler, at what point is the image actually loaded and the event handler run?
    After the image finishes downloading from the server.

    Does the loading of the image begin at #1 or #2, ie when I first reference it or when it is added to the document?
    Try this:
    Code:
    window.onload=function()
    {
    	var img = document.createElement('img');
    	img.src = "105_0532.jpg";
    	img.onload = function ()
    	{
    		alert("loaded");
    	}
    };
    That principle is used to "preload" images so that rollover effects are instantaneous. Otherwise, a rollover effect would be delayed while the image loaded. Note: once the image has downloaded, it will be put in the brower's cache, so the alert message won't display if you run the script again.
    Can I even add an event handler at the point I do so?
    You can add an event handler to an element anytime after the element has been created.

  3. #3
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that. It's not for rollover effects but image transitions where the image files can be between 20Kb and 40Kb in size. If the browser is still downloading the new image when the image transition begins then there is nothing for the script to work on. An example would be fading one image in over the top of the old image. If the transition takes 5 seconds but it takes five seconds for the new image to load then it will just appear as if the images swapped immediately.

    What I am after is something like the following sequence:

    load new image
    If image is loaded then begin transition.

    However the user may move around in the sequence of images at will, i.e. 1, 5, 2,4,3 so simply pre-loading the next in sequence may be the wrong thing to do. However the transition should also occur on the next viewing of any of the images so I cannot rely on the onload handler starting the transition.

    Apologies if I am not making myself clear.


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
  •