A Flash Developer Resource Site

Results 1 to 3 of 3

Thread: Notify when img.src has changed and loaded

  1. #1
    Retired Mod aversion's Avatar
    Join Date
    Jun 2000
    Location
    insomnia
    Posts
    7,917

    Notify when img.src has changed and loaded

    I'm using JS to change an IMG src property and thus change the image but I need to know when that image has finished loading successfully.

    Code:
    for(v=0;v<docPicsLen;v++){
    	currentPic = docPics[v].src
    	currentPic = currentPic.slice(currentPic.lastIndexOf("/"))
    	docPics[v].src = newSize+currentPic;
    }
    This code changes all the images on the page with a certain classname, collected in an array called docPics. You can see that it's grabbing the original file name and then changing the source folder (to the value of newSize) to load a different image with the same name.

    It works fine but I want to run a loading notification that terminates when the image change has completed and I can't find a way to check when that is.

    I know how to check if an image has loaded if the image object is new to the page but because I'm only changing the SRC property of the IMG object things like img.complete don't work, it will always return true if the original image loaded correctly, no matter what's going on with the change.

    Anyone have any ideas? If I can't find a way I'm going to have to replace the images altogether, which will be a pain in the neck.

  2. #2
    Senior Member catbert303's Avatar
    Join Date
    Aug 2001
    Location
    uk
    Posts
    11,222
    If browsers supported event capture (well, I guess what I mean is if browsers with more than 10 people using them supported it right ) you could setup a capturing listener on the page and that would be triggered as each of your images were loaded.

    Code:
    // works in Opera, and probably KHTML browsers like Safari
    window.addEventListener('load', function(e) {
        alert(e.target);
    }, true);
    but without that, you could maybe assign a load event listener to each image. Here's a quick example -

    Code:
    <html>
    <head>
    <title>Test img load</title>
    <script type="text/javascript">
    
    function swapImages(newDir) {
        var imgs = document.getElementsByTagName('img');
        var n = imgs.length;
        while (n--) {
            if (imgs[n].className == 'change-me') {
                imgs[n].src = newDir + imgs[n].src.slice(imgs[n].src.lastIndexOf('/'));
            }
        }
    }
    
    // setup the event listeners
    function init(e) {
        var imgs = document.getElementsByTagName('img');
        var n = imgs.length;
        while (n--) {
            addEvent(imgs[n], 'load', imgLoad);
        }
    }
    
    // do something when the image is loaded
    function imgLoad(e) {
        if (!e) var e = window.event;
        // note: I don't know which is correct, but moz reports e.target as being the document and e.currentTarget as the image
        // opera says both e.target and e.currentTarget are the img - which is what I would've expected...
        // IE doesn't have the concept of a currentTarget, but srcElement (it's version of target) points at the img element
        var target = e.currentTarget || e.srcElement;
    
        alert(target.src + ' is loaded');
    }
    // add your own preference for an addEvent function here ;)
    function addEvent(obj, ev, fn) {
        if (obj.addEventListener) {
            obj.addEventListener(ev, fn, false);
        } else if (obj.attachEvent) {
            obj.attachEvent('on' + ev, fn);
        }
    }
    
    addEvent(window, 'load', init);
    
    </script>
    </head>
    <body>
    
      <img src="imgs1/1.jpg" class="change-me">
      <img src="imgs1/2.jpg" class="change-me">
      <img src="imgs1/3.jpg">
      <img src="imgs1/4.jpg" class="change-me">
    
      <p><a href="javascript:swapImages('imgs2');">swap</a></p>
    
    </body>
    </html>
    Since you should know how many images are being swapped, you could simply increment a counter from the imgLoad function - so then when it reached the total you'd know all the images were in place.

    Hope this helps

  3. #3
    Retired Mod aversion's Avatar
    Join Date
    Jun 2000
    Location
    insomnia
    Posts
    7,917
    Thanks Catbert, that works, I didn't even think of using listeners for some stupid reason. I'm working with the prototype.js library so I can just use:

    Code:
    for(v=0;v<docPicsLen;v++){
    	Event.observe(docPics[v], 'load', imgLoaded, false);
    	currentPic = docPics[v].src
    	currentPic = currentPic.slice(currentPic.lastIndexOf("/"))
    	docPics[v].src = newSize+currentPic;
    }
    Where imgLoaded is a function that counts them in.

    Thanks a lot, sometimes I can't see past my own nose

Posting Permissions

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




Click Here to Expand Forum to Full Width

HTML5 Development Center