preloading images not working?

Discussion in 'Javascript' started by Geoff Cox, Sep 14, 2005.

  1. Geoff Cox

    Geoff Cox Guest

    Hello,

    I am still having problems - apologies if the answer is in previous
    postings!

    I now have, in the header,

    <sctipt>
    var myimages=new Array();

    function preloadimages();
    {
    for (i=0;i<preloadimages.arguments.length;i++)
    {
    myimages=new Image();
    myimages.src=preloadimages.arguments;
    }
    }
    </script>

    and

    <body
    onload="preloadimages('before-and-after.gif','pic1.jpg','pic2.jpg',
    'pic3.jpg','pic4.jpg','pic5.jpg','pic6.jpg','pic7.jpg')">

    The above is in the first page where only the first image above, the
    before-and-after.gif image, is displayed.

    The rest are displayed in the second page linked to the first and are
    shown by using an array

    var picture = new Array(7);
    picture[0] = "pic1.jpg";
    picture[1] = "pic2.jpg";
    picture[2] = "pic3.jpg";
    picture[3] = "pic4.jpg";
    picture[4] = "pic5.jpg";
    picture[5] = "pic6.jpg";
    picture[6] = "pic7.jpg";

    and then displayed using typical code as follows

    document.getElementById('picture').innerHTML
    = "<img src=" + window["picture"][situation_number] + ">";

    I am finding that the first 3 jpg images are displayed quickly in the
    second page (presumably from the IE v6 cache), but the others 4 are
    only downloaded when the second page gets to the point where they are
    to be displayed.

    Am I wrong somewhere? Where can I look to see which images, if any,
    have been preloaded into the browser cache? The use of the picture
    array is possibly wrong or redundant??

    Cheers

    Geoff
     
    Geoff Cox, Sep 14, 2005
    #1
    1. Advertisements

  2. Geoff Cox

    web.dev Guest

    Hi Geoff,



    To me, this method is redundant. The whole purpose is to *preload* the
    images, not to grab the images once the page has loaded.
    Try not to use the onload event to preload your images. Instead you
    might want to try it this way:

    <script type = "type/javascript">
    //place this in between the HEAD tag

    //preload images
    var myImages = new Array();
    var n_images = 7;

    //if you know the number of images to preload
    for(var i = 0; i < n_images; ++i)
    {
    myImages = new Image();
    //only useful if your pictures have a common name
    myImages.src = "path/pic" + i + ".jpg";
    }

    function displayImages()
    {
    var imgStr = "";

    for(var i = 0; i < n_images; ++i)
    {
    imgStr += "<img src ='" + myImages.src + "/>";
    }

    document.getElementById("picture").innerHTML = imgStr;
    }

    window.onload = displayImages;
    </script>

    And in the body of your html, you should ensure you have an element
    with the id "picture".

    For example:

    <body>
    ....
    <div id = "picture"></div>
    ....
    </body>
     
    web.dev, Sep 14, 2005
    #2
    1. Advertisements

  3. Geoff Cox

    Geoff Cox Guest

    Hello,

    I thought the above was pre-loading!! What is it doing?
    I would certainly like to try your suggestions but when you write that
    I should have
    this might be difficult? What happens is that the page starts with a
    table in the <body> area, and then a cell is populated with the
    question text and an image for a particular "situation", using
    Javascript. When the question has been answered the next situation
    image and question go into the table etc etc using the following
    method ..
    Will you code work in this way?

    Cheers

    Geoff




     
    Geoff Cox, Sep 14, 2005
    #3
  4. Geoff Cox

    Geoff Cox Guest

    Zoe,

    When you say "write out the div" - the above code for changing the
    image depends on the ID of the <td> tag, ei

    <td ID='picture' valign='top'></td>

    Not clear how your ref to a div filts in here?

    Cheers

    Geoff
     
    Geoff Cox, Sep 14, 2005
    #4
  5. Geoff Cox

    Geoff Cox Guest

    Web dev

    I have your code working but just another thought.

    Is it possible to use Javascipt to put up a message saying "please
    wait while images are downloaded" ? Or, make the questions and slider
    appear after the images have been downlloaded?

    The other thought I'd had was to preload the images for the second
    page whilst the first page was on the screen but of couse the line

    document.getElementById("picture").innerHTML = imgStr;

    gives an error. Is there a way round this?

    Cheers

    Geoff
     
    Geoff Cox, Sep 14, 2005
    #5
  6. Geoff Cox

    Geoff Cox Guest

    Zoe,

    When I said to web dev that his code was working - afraid I made a
    mistake! I still had

    var picture = new Array(7);
    picture[0] = "pic1.jpg";
    picture[1] = "pic2.jpg";
    picture[2] = "pic3.jpg";
    picture[3] = "pic4.jpg";
    picture[4] = "pic5.jpg";
    picture[5] = "pic6.jpg";
    picture[6] = "pic7.jpg";

    in the code so although the images were preloaded my code was using
    the above arry names to show the images.

    Can you explain how I would alter

    document.getElementById('picture').innerHTML =
    "<img src=" + window["picture"][situation_number] + ">";

    to use web dev's code?

    He has

    document.getElementById("picture").innerHTML = imgStr;

    but I'm not clear what this means. I need the images to be preloaded
    but they are only displayed 1 at a time as the user progresses through
    the app....

    Cheers

    Geoff
     
    Geoff Cox, Sep 14, 2005
    #6
  7. Geoff Cox

    Geoff Cox Guest

    Zoe,

    It is difficult for you to see what I am trying to do so here is the
    full code - most grateful for any further help in getting me to see
    how to handle the preloading of the images! I have not worked out yet
    how to dsiplay the images when required ... as you will see!
    Previously I had used the array of picture (// out below).

    Geoff

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>
    <HEAD>

    <link rel=stylesheet href="slider.css" type="text/css">
    <SCRIPT SRC="slider.js"></SCRIPT>
    <SCRIPT SRC="prototype-1.3.1.js"></SCRIPT>
    <script src="questions.js"></script></script>

    <script type="text/javascript">

    //preload images
    var myImages = new Array();
    var n_images = 8;

    for(var i = 0; i < n_images; ++i)
    {
    myImages = new Image();

    myImages.src = "pic" + i + ".jpg";
    }

    function displayImages()
    {
    var imgStr = "";

    for(var i = 0; i < n_images; ++i)
    {
    imgStr += "<img src ='" + myImages.src + "/>";
    }

    document.getElementById("picture").innerHTML = imgStr;
    }

    window.onload = displayImages;

    var mySlider1 = new Slider( "Slider1" );
    var count = 0;

    var situation_number = 0;

    var slider_value = new Array(8);
    for (var n = 0; n < slider_value.length; n++ ) {
    slider_value[n] = new Array(8);
    }

    mySlider1.leftValue = -10;
    mySlider1.rightValue = 10;
    mySlider1.defaultValue = 0;
    mySlider1.offsetX = 1;
    mySlider1.offsetY = 1;
    mySlider1.buttonWidth = 10;
    mySlider1.maxSlide = 288;

    mySlider1.onchange
    ="document.getElementById('Slider1ValueText').innerHTML
    =''+this.getValue(0)";

    var title = new Array(7);
    title[0] = "Social Individual";
    title[1] = "Formal Individual";
    title[2] = "Social Group";
    title[3] = "Formal Group";
    title[4] = "Parents";
    title[5] = "Telephone";
    title[6] = "'Scripted' Conversations";

    // var picture = new Array(7);
    // picture[0] = "pic1.jpg";
    // picture[1] = "pic2.jpg";
    // picture[2] = "pic3.jpg";
    // picture[3] = "pic4.jpg";
    // picture[4] = "pic5.jpg";
    // picture[5] = "pic6.jpg";
    // picture[6] = "pic7.jpg";


    function next_question(button)
    {

    slider_value[situation_number][count] = this.mySlider1.getValue(0);

    //totalreadings += ' ' + this.mySlider1.getValue(0);

    this.count++;

    if (this.count < 8)
    {

    document.getElementById('lhs_question').innerHTML = window["lhs_" +
    situation_number][count];
    document.getElementById('rhs_question').innerHTML = window["rhs_" +
    situation_number][count];

    mySlider1.setValue( (mySlider1.leftValue + mySlider1.rightValue) / 2
    );

    } else {

    situation_number++;

    switch(situation_number)
    {
    case (1):
    mySlider1.setValue( (mySlider1.leftValue +
    mySlider1.rightValue) / 2 );
    count=0;
    fillTable();
    break;
    case (2):
    mySlider1.setValue( (mySlider1.leftValue +
    mySlider1.rightValue) / 2 );
    count=0;
    fillTable();
    break;
    case (3):
    mySlider1.setValue( (mySlider1.leftValue +
    mySlider1.rightValue) / 2 );
    count=0;
    fillTable();
    break;
    case (4):
    mySlider1.setValue( (mySlider1.leftValue +
    mySlider1.rightValue) / 2 );
    count=0;
    fillTable();
    break;
    case (5):
    mySlider1.setValue( (mySlider1.leftValue +
    mySlider1.rightValue) / 2 );
    count=0;
    fillTable();
    break;
    case (6):
    mySlider1.setValue( (mySlider1.leftValue +
    mySlider1.rightValue) / 2 );
    count=0;
    fillTable();
    break;
    case(7):
    if (button.parentNode &&
    button.parentNode.removeChild) {
    button.parentNode.removeChild(button);
    }
    saveIt();
    break;

    }

    }

    }

    function fillTable()
    {
    document.getElementById('title').innerHTML = "<h2>" +
    title[situation_number] + "</h2>";
    document.getElementById('picture').innerHTML = "<img src=" +
    window["picture"][situation_number] + ">";

    document.getElementById('lhs_question').innerHTML = window["lhs_" +
    situation_number][count];
    document.getElementById('rhs_question').innerHTML = window["rhs_" +
    situation_number][count];

    }

    function saveIt()

    {
    document.getElementById("Slider1ValueText").innerHTML = "";

    for (situation_number = 0; situation_number < 7;
    situation_number++)
    {
    document.getElementById("Slider1ValueText").innerHTML
    += escape("\n") + "Situation: " + title[situation_number] + " ";

    for (var i = 0; i <
    slider_value[situation_number].length; i++)
    {
    document.getElementById("Slider1ValueText").innerHTML
    += this.slider_value[situation_number] + ' ';
    }
    }


    var recipient = "extraemails";
    var realname = "SPA Form";
    var url = 'http://website/path/formmail-nms.cgi';
    //var pars = 'recipient=' + recipient + '&' + 'realname=' +
    realname + '&' + 'Name=' + name + '&' + 'Slider Values= ' +
    document.getElementById('Slider1ValueText').innerHTML;
    var pars = 'recipient=' + recipient + '&' + 'realname=' +
    realname + '&' + 'Name=' + name + '&' + 'Slider Values=' +
    document.getElementById("Slider1ValueText").innerHTML

    var myAjax = new Ajax.Updater('Status', url, {method: 'post',
    parameters: pars});
    }

    </script>

    </HEAD>

    <body onload="mySlider1.placeSlider()">
    <center>

    <table border='0' width='100%'>
    <tr>
    <td>&nbsp;</td>
    <td ID='title' valign='top' align='center'></td>
    <td>&nbsp;</td>
    </tr>

    <tr>
    <td>&nbsp;</td>
    <td ID='picture' valign='top'></td>
    <td>&nbsp;</td>
    </tr>

    <tr>
    <td colspan="3">&nbsp;</td>
    </tr>

    <tr>
    <td ID='lhs_question' width='30%' valign='top' height='70'></td>
    <td width='40%' align='center' valign='top' height='70'><IMG
    SRC='sliderbg.gif' NAME='Slider1RailImg' ID='Slider1RailImg'></td>
    <td ID='rhs_question' width='30%' valign='top' height='70'></td>
    </tr>

    <tr><td colspan='3' align='center' valign='top' height='100'>
    <input type='button' name ='nextbutton' value='Next'
    onclick='next_question(this)'>
    <SPAN class='invisible' ID='Slider1ValueText'></SPAN>
    <SPAN ID='Status'></SPAN></td>
    </tr>
    </table>
    </center>

    <script>
    fillTable();
    </script>


    <SCRIPT>

    mySlider1.writeSlider();

    </SCRIPT>

    </body>
    </html>
     
    Geoff Cox, Sep 14, 2005
    #7
  8. Geoff Cox

    Mick White Guest

    I suggest you use "script", at least.
    "var" above is redundant

    for(var i=0;i<arguments.length;i++) // "var" here highly recommended


    [...]
    Mick
     
    Mick White, Sep 14, 2005
    #8
  9. Geoff Cox

    ASM Guest

    Geoff Cox wrote:

    hi,

    I'm not sure you can both have :
    - window.onload = displayImages; (in header js script)
    and
    - <body onload="mySlider1.placeSlider()">

    and I think you must choice a way to do (in script or in body tag)


    I see :
    <img src=" + window["picture"][situation_number] + ">";
    what is window ?
    and what is window['picture'] ?
    see below
    mas i mas complicado
    it's here that would have to preload your images


    but, on my idea, it only memorizes paths to images

    to be almost quite sure they are in cache :

    var ig=0;
    function preload_imgs() {
    myImages[ig] = new Image();
    myImages[ig].onload = preload_imgs;
    myImages[ig].src = "pic" + ig + ".jpg";
    ig++ ;
    }

    preload_imgs();

     
    ASM, Sep 15, 2005
    #9
  10. Geoff Cox

    Geoff Cox Guest

    Stephane,

    I have used your code above (making var ig = 1 to start as the pics
    are named pic1) .... but the problem seems to be that I cannot have 2
    items in the <body onload etc>

    I have

    <body onload="preload_imgs()">

    <script>
    mySlider1.placeSlider();
    </script>

    which gives the error message "object needed" for the line with
    mySlider1.placeSlider();

    if I have

    <body onload="mySlider1.placeSlider()"> this is OK but I then get an
    error in putting the first pic in the table - I guess the creation of
    the table is happening before the pics have been loaded.

    Any thoughts?!

    Geoff
     
    Geoff Cox, Sep 15, 2005
    #10
  11. Geoff Cox

    Geoff Cox Guest

    Zoe,
    I am using

    <body onload="preload_imgs();mySlider1.placeSlider();">

    but I keep getitng the error

    'myImages[..].src' is null or not an object.

    How do I test to see that the preload_imgs() is working?

    Cheers

    Geoff
     
    Geoff Cox, Sep 15, 2005
    #11
  12. Geoff Cox

    Geoff Cox Guest

    Zoe,

    I know but I thought that the vital difference was the value of the
    situation_number varies!?

    Geoff
     
    Geoff Cox, Sep 15, 2005
    #12
  13. Geoff Cox

    Geoff Cox Guest

    Zoe,

    I'm sure you are right - a lot less frantic changing required !

    Geoff
     
    Geoff Cox, Sep 15, 2005
    #13
  14. Geoff Cox

    Geoff Cox Guest

    On Thu, 15 Sep 2005 09:10:36 GMT, "Zoe Brown"

    Zoe,

    One aspect I do not understand is that if I use alert() to check the
    value of

    myImages[0].src

    it gives http://website/pico.jpg

    so when I use

    myImages[0].src

    later to display this image it seems to me that the image is being
    taken from the website rather than from the cache? How does this work?

    Geoff
     
    Geoff Cox, Sep 15, 2005
    #14
  15. Geoff Cox

    Geoff Cox Guest

    On Thu, 15 Sep 2005 09:10:36 GMT, "Zoe Brown"

    Zoe,

    The code below works except that I would like to be able to only show
    the "Next" button when either the first image or, perhaps better all
    the images, have been downloaded.

    I have tried

    <script>
    if (myImages[6].src)
    {
    sendButton();
    }
    </script>

    but this does not work - the button is displayed before the first
    image is displayed and so the user can click it and cause an error.

    Any ideas?

    Cheers

    Geoff


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>
    <HEAD>

    <link rel=stylesheet href="slider.css" type="text/css">
    <SCRIPT SRC="slider.js"></SCRIPT>
    <SCRIPT SRC="prototype-1.3.1.js"></SCRIPT>
    <script src="questions.js"></script>

    <script type="text/javascript">


    var myImages = new Array();

    var numImages = 7;

    for (var z=0; z<numImages; z++)
    {
    myImages[z]=new Image();
    myImages[z].src="pic" + z + ".jpg";
    }



    var mySlider1 = new Slider( "Slider1" );

    var count = 0;

    var situation_number = 0;

    var slider_value = new Array(8);
    for (var n = 0; n < slider_value.length; n++ ) {
    slider_value[n] = new Array(8);
    }

    mySlider1.leftValue = -10;
    mySlider1.rightValue = 10;
    mySlider1.defaultValue = 0;
    mySlider1.offsetX = 1;
    mySlider1.offsetY = 1;
    mySlider1.buttonWidth = 10;
    mySlider1.maxSlide = 288;

    mySlider1.onchange
    ="document.getElementById('Slider1ValueText').innerHTML
    =''+this.getValue(0)";

    var title = new Array(7);
    title[0] = "Social Individual";
    title[1] = "Formal Individual";
    title[2] = "Social Group";
    title[3] = "Formal Group";
    title[4] = "Parents";
    title[5] = "Telephone";
    title[6] = "'Scripted' Conversations";

    function next_question(button)
    {

    slider_value[situation_number][count] = this.mySlider1.getValue(0);

    //totalreadings += ' ' + this.mySlider1.getValue(0);

    this.count++;

    if (this.count < 8)
    {

    document.getElementById('lhs_question').innerHTML = window["lhs_" +
    situation_number][count];
    document.getElementById('rhs_question').innerHTML = window["rhs_" +
    situation_number][count];

    mySlider1.setValue( (mySlider1.leftValue + mySlider1.rightValue) / 2
    );

    } else {

    situation_number++;

    switch(situation_number)
    {
    case (1):
    mySlider1.setValue( (mySlider1.leftValue +
    mySlider1.rightValue) / 2 );
    count=0;
    fillTable();
    break;
    case (2):
    mySlider1.setValue( (mySlider1.leftValue +
    mySlider1.rightValue) / 2 );
    count=0;
    fillTable();
    break;
    case (3):
    mySlider1.setValue( (mySlider1.leftValue +
    mySlider1.rightValue) / 2 );
    count=0;
    fillTable();
    break;
    case (4):
    mySlider1.setValue( (mySlider1.leftValue +
    mySlider1.rightValue) / 2 );
    count=0;
    fillTable();
    break;
    case (5):
    mySlider1.setValue( (mySlider1.leftValue +
    mySlider1.rightValue) / 2 );
    count=0;
    fillTable();
    break;
    case (6):
    mySlider1.setValue( (mySlider1.leftValue +
    mySlider1.rightValue) / 2 );
    count=0;
    fillTable();
    break;
    case(7):
    if (button.parentNode &&
    button.parentNode.removeChild) {
    button.parentNode.removeChild(button);
    }
    saveIt();
    break;

    }

    }

    }

    function fillTable()
    {

    document.getElementById('title').innerHTML = "<h2>" +
    title[situation_number] + "</h2>";

    document.getElementById('picture').innerHTML = "<img src ='" +
    myImages[situation_number].src + "' />";

    document.getElementById('lhs_question').innerHTML = window["lhs_" +
    situation_number][count];
    document.getElementById('rhs_question').innerHTML = window["rhs_" +
    situation_number][count];

    }

    function saveIt()

    {
    document.getElementById("Slider1ValueText").innerHTML = "";

    for (situation_number = 0; situation_number < 7;
    situation_number++)
    {
    document.getElementById("Slider1ValueText").innerHTML
    += escape("\n") + "Situation: " + title[situation_number] + " ";

    for (var i = 0; i <
    slider_value[situation_number].length; i++)
    {
    document.getElementById("Slider1ValueText").innerHTML
    += this.slider_value[situation_number] + ' ';
    }
    }


    var recipient = "extraemails";
    var realname = "SPA Form";
    var url = 'http://website/path/formmail-nmst.cgi';
    //var pars = 'recipient=' + recipient + '&' + 'realname=' +
    realname + '&' + 'Name=' + name + '&' + 'Slider Values= ' +
    document.getElementById('Slider1ValueText').innerHTML;
    var pars = 'recipient=' + recipient + '&' + 'realname=' +
    realname + '&' + 'Name=' + name + '&' + 'Slider Values=' +
    document.getElementById("Slider1ValueText").innerHTML

    var myAjax = new Ajax.Updater('Status', url, {method: 'post',
    parameters: pars});
    }

    function sendButton()
    {
    document.write("<center>");
    document.write("<table>");
    document.write("<tr><td colspan='3' align='center' valign='top'
    height='100'>");
    document.write("<input type='button' name ='nextbutton' value='Next'
    onclick='next_question(this)'>");
    document.write("<SPAN class='invisible'
    ID='Slider1ValueText'></SPAN>");
    document.write("<SPAN ID='Status'></SPAN></td>");
    document.write("</tr>");
    document.write("</table>");
    document.write("</center>");

    }


    </script>

    </HEAD>

    <body onload="mySlider1.placeSlider()">

    <center>

    <table border='0' width='100%'>
    <tr>
    <td>&nbsp;</td>
    <td ID='title' valign='top' align='center'></td>
    <td>&nbsp;</td>
    </tr>

    <tr>
    <td>&nbsp;</td>
    <td ID='picture' valign='top'></td>
    <td>&nbsp;</td>
    </tr>

    <tr>
    <td colspan="3">&nbsp;</td>
    </tr>

    <tr>
    <td ID='lhs_question' width='30%' valign='top' height='70'></td>
    <td width='40%' align='center' valign='top' height='70'>
    <IMG SRC='sliderbg.gif' NAME='Slider1RailImg'
    ID='Slider1RailImg'></td>
    <td ID='rhs_question' width='30%' valign='top' height='70'></td>
    </tr>


    </table>
    </center>

    <script>
    if (myImages[6].src)
    {
    sendButton();
    }

    </script>


    <script>
    fillTable();
    </script>


    <SCRIPT>

    mySlider1.writeSlider();

    </SCRIPT>

    </body>
    </html>
     
    Geoff Cox, Sep 15, 2005
    #15
  16. Geoff Cox

    Geoff Cox Guest

    OK - I see.

    Geoff
     
    Geoff Cox, Sep 15, 2005
    #16
  17. Geoff Cox

    Geoff Cox Guest

    Zoe,

    OK - so I should have a function which just increments
    situation_number etc?

    Geoff

    PS the Case code does work but presumably there is a lot of redundant
    code?
     
    Geoff Cox, Sep 15, 2005
    #17
  18. Geoff Cox

    Geoff Cox Guest

    Zoe,

    I have done as above the changed situation_number causes a new images
    and a new question to be displayed ... that's the idea and that
    happens so must be right?!!?

    Geoff
     
    Geoff Cox, Sep 15, 2005
    #18
  19. Geoff Cox

    ASM Guest

    did you see that :
    preload_imgs();
    was allready called
    just after its own declaration ...

    so, no need to call it once more (in body tag or otherwhere)
    delete that onload()
    and let function preload_imgs() to run before (during ?) loading
    I do not know what mySlider1.placeSlider()
    attempt to do ...
    If you can't (or don't know how) modify it
    and *if* you prefer to launch preload_imgs() after loading (body tag)

    you can try :

    <script>
    onload = Function ('mySlider1.placeSlider()');
    </script>

    but I'm afraid that will not work (if preload_imgs() haven't run before)
    1) I think there was a little error in my proposition
    (forgotten to stop images loading when last image has done)

    var myImages = new Arrray();
    var ig = 0;
    var ig_max = 7;

    function preload_imgs() {
    if(ig <= ig_max) {
    myImages[ig] = new Image();
    myImages[ig].onload = preload_imgs;
    myImages[ig].src = "pic" + (+ig+1) + ".jpg";
    ig++ ;
    }
    }
    preload_imgs();

    2) To run function creating tables after images are all loaded
    I don't know ...
    because placeSlider() or writeSlider() are unknown
    Do they create and write table(s) ?

    var myImages = new Arrray();
    var ig = 0;
    var ig_max = 7;

    function preload_imgs() {
    if(ig <= ig_max) {
    myImages[ig] = new Image();
    myImages[ig].onload = preload_imgs;
    myImages[ig].src = "pic" + (+ig+1) + ".jpg";
    ig++ ;
    }
    else {
    mySlider1.placeSlider(); // or mySlider1.writeSlider();
    mySlider1.writeSlider(); // mySlider1.placeSlider();
    document.getElementById('wait').style.display='none';
    }
    }

    and in space for script launching mySlider1.placeSlider()
    in end of page

    <h2 id="wait" style="color:red">Waiting end of loading ... </h2>
    <script type="text/javascript">
    preload_imgs();
    </script>

    of course : no more redondant onloads by otherway ! !
     
    ASM, Sep 15, 2005
    #19
  20. Geoff Cox

    ASM Guest

    because
    - 1 - preload_imgs() didn't finish it's job
    as soon as mySlider1.placeSlider() is called
    - 2 - perhaps preload_imgs() has no end ?
    var myImages = new Arrray();
    var ig = 0;
    var ig_max = 7;

    function preload_imgs() {
    if(ig <= ig_max) {
    if(ig!=0) alert('image : '+ig+' loaded');
    myImages[ig] = new Image();
    myImages[ig].onload = preload_imgs;
    myImages[ig].src = "pic" + (+ig+1) + ".jpg";
    ig++ ;
    }
    }
    preload_imgs();
     
    ASM, Sep 15, 2005
    #20
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.