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 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    running script AFTER image loads

    Hi guys,

    I'm on the look out for some help again.

    I am trying to write a scalable webpage for displaying a library of images.

    I am using javascript to generate as much of the html dynamically to make modifying the site as simple as addaing a few lines of html and adding some new image files to the directory.

    I am close but have a specific problem that I suspect I am just too dense to crack.

    This link demonstrates what I have so far.
    http://myweb.tiscali.co.uk/warbossdo...est/index.html

    My problem focuses around these two JS functions that generate the HTML and position the images.

    function fillDiv (a,b){
    targetDiv = document.getElementById(a);
    imgCount=b;
    divContent='';
    for (n=1;n<=imgCount;n++) {
    divContent+='<IMG ID="'+a+'img0'+n+'" SRC=""><DIV ID="'+a+'img0'+n+'shdw" CLASS="shadow"></DIV>';
    }
    targetDiv.innerHTML = divContent;
    }

    function formatDiv (a,b){
    section = a.slice(0,2);
    page = a.slice(2,4);
    imgCount=b;
    shdwOffset = 10;
    imgWidthTotal = (shdwOffset*imgCount);
    for (n=1;n<=imgCount;n++) {
    newImg = new Image();
    newImg.src = section+'_page'+page+'_image0'+n+'.jpg';
    x = a+'img0'+n;
    targetImg = document.getElementById(x);
    targetImg.src = newImg.src;
    }
    spacer = (800-imgWidthTotal)/(imgCount+1);
    leftPosition = spacer;
    for (n=1;n<=imgCount;n++) {
    x = a+'img0'+n;
    targetImg = document.getElementById(x);
    y = a+'img0'+n+'shdw';
    targetShdw = document.getElementById(y);
    targetImg.style.left = leftPosition;
    targetShdw.style.left = leftPosition+shdwOffset;
    targetImg.style.top = (400-targetImg.height-shdwOffset)/2;
    targetShdw.style.top = ((400-targetImg.height-shdwOffset)/2)+shdwOffset;
    targetImg.style.visibility = '';
    leftPosition += targetImg.width+shdwOffset+spacer;
    }
    }

    As you will see from the demo, the positioning does not work because the images have not loaded yet so image height and width are 0.

    Having pored over the forums I think my solution probably lies in using 'image'.complete to detect whether the set of images has been loaded before applying the positioning function. I am not sure how I can incorprate such a function into what I already have however. I don't even know when the browser 'loads' the image. Is it at the newImg.src stage or when it gets displayed on screen?

    Also I have noticed some browser differences with this code. Do the browser load images in different ways/at different times or is it just 'one of those things'.

    Please note I want to avoid preloading the images as I could be dealing with HUNDREDS of images on the finished page and this would make load times horrendous (would it not?).

    On a side note, I would like to hear from someone with experience whether an implementation of DOM rather than my innerHTML function, would be a better implementation for these purposes, or would it have no real advantage. (I confess to knowing very little about DOM but if it would help I'm willing to learn).

    P.S. I realise the newImg = new Image bit is redundant but I read somewhere that using the image constructor grabbed theimage properties so I tried it as a fix. Obviously it didn't work.

    Thanks in anticipation of help

    Doozer

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    ImgSRC=new Image();
    ImgSRC.onload=function(){ whateverFunction(this); }
    ImgSRC.src=MyImage.gif;

    will call whateverFunction when the imageMyImage.gif has been located and the height and width available.

  • #3
    New Coder
    Join Date
    Feb 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the tip, I hadn't thought of that as a possible solution.

    I cannot for the life of me see how I can implement that with what I have already.

    I need to call the formatDiv function after all 2 or 3 images in the page have loaded, but I don't want anything to appear on screen until after I have done all of this.

    Will onLoad work before I display the images on the screen?


  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <html>
    <head>
    <script>
    
    var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    var ImgAry=new Array('One.gif','Two.gif','Three.gif');
    var ImgSRCAry=new Array();
    var Cnt=0;
    
    function Preload(){
     for (i=0;i<ImgAry.length;i++){
      ImgSRCAry[i]=new Image();
      ImgSRCAry[i].onload=function(){ whateverFunction(); }
      ImgSRCAry[i].src=ImgPath+ImgAry[i];
     }
    }
    
    function whateverFunction(){
     Cnt++
     if (Cnt==2){
      alert('call formatDiv()' );
     }
    }
    
    </script>
    </head>
    <body onload="Preload();" >
    I need to call the formatDiv function after all 2 or 3 images in the page have loaded, but I don't want anything to appear on screen until after I have done all of this.
    </body>
    </html>


  •  

    Posting Permissions

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