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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 27
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Controlling the Load Sequence of Images

    Will someone please show me how to append the lines in this "sequential picture loading" script.
    Within the dotted lines is a complete script for preloading five pictures. The line for the first image is appended with an improvised "onLoad" event for illustration. Below that are some snippets of code I found but I don't know how to properly construct the lines to halt the execution of the script until each picture is fully loaded. This will work in Internet Explorer -- not in Netscape. The concept is pretty simple. As the page begins to load, the first picture in the list is called for, but since this is coupled with an onLoad event, one that must give a positive return value before proceeding to the next line, no other pictures will be sent down the wire until picture #1 has completely loaded; as each line for an image will be appended, except for the last one, the rest of the pictures follow this sequence, one by one. I just need someone to show me the proper form and syntax to use so that the script is halted if the onLoad (or the the complete download of a given picture ends up being negative or 'false') and to "proceed" with the script if the Onload for a given picture ends up being "true."

    -----------------------------------------
    <script language=javascript>
    function loadImages {

    document.firstImage.src = "LIC-1.jpg"; onLoad="returnValue();return false;">
    document.secondImage.src = "LIC-2.jpg";
    document.thirdImage.src = "LIC-3.jpg";
    document.fourthImage.src = "LIC-4.jpg";
    document.fifthImage.src = "LIC-5.gif";
    }
    </script>
    -----------------------------------------

    onClick="returnValue();return false;">

    function someFunction()
    { if (something)
    {proceed=true}
    else {proceed=false}
    return proceed
    }

    Below is a link to a test page for this Javascript functionality. It currently does not perform as intended. If someone can get it to work I will repost the link as a benefit to other CodeForum users (as well as an accolade to the CodeForum member who provides the properly functioning code).

    http://www.jeffs-icons.com/LoadTest/sequence2.html
    Last edited by icon kid; 01-14-2005 at 12:01 AM.

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Why don't you check out the image preloading script located here:
    http://www.javascriptkit.com/script/cutindex4.shtml

    You can see how it has been done.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    New Coder
    Join Date
    Jan 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Eric:

    Which one of the scripts are you referring to? I didn't see any that will do what I want.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var arrImgs = new Array("LIC-1.jpg", "LIC-2.jpg", "LIC-3.jpg", "LIC-4.jpg", "LIC-5.jpg");
    function loadImage(index) {
      var img = document.images['Image'+(index+1)];
      if (img){
        img.onload = function(){
          loadImage(index+1);
        }
        img.src = arrImgs[index];
      }
    }
    </script>
    </head>
    <body onload="loadImage(0)">
    #1 <img id="Image1" src="default.gif" /><br />
    #2 <img id="Image2" src="default.gif" /><br />
    #3 <img id="Image3" src="default.gif" /><br />
    #4 <img id="Image4" src="default.gif" /><br />
    #5 <img id="Image5" src="default.gif" /><br />
    </body>
    </html>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    3 image preloader scripts were in that list....

    Preload Images Script
    Preloading images refers to loading images into browser cache prior to displaying them, and is used when you wish certain images to be revealed instantly when called upon (such as in a rollover effect). Use this script to preload any number of images easily.

    Preload Images Script II
    This cool script will not only preload images, but update you on its progress, live, using an update bar (all constructed using code!). Requires Internet Explorer 4+ to work, with all other browsers simply bypassing the preloading.

    Preload Images Script III
    Another preload image script with a graphical bar updating the visitor on the preloading process. Works in IE4+ and NS6+, and degrades well with other browsers.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #6
    New Coder
    Join Date
    Jan 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Eric:

    I can tell from the descriptions that none of the scripts you mentioned will do what I want. I'm not trying to preload images per se -- I'm trying to load them in a sequence that I specify. I put this help request on 4 or 5 tech forums and I've gotten many responses but the question seems to just confuse people about what I'm trying to do. I'm going to try Glenn's script (above) later today, but maybe I should pose the question a different way:

    Can someone tell me how to halt the execution of a script if a certain thing does NOT happen, and have the script continue if this certain thing DOES happen. I'm not very knowledgeable about Javascript but there is one thing I'm certain of -- Javascript can do this. In my case, I want that determining "thing" to be the loading of a picture. If the picture doesn't load, I want the script to come to a halt. If the picture does load, I want the script to continue. It's all very simple so I don't understand why it confuses so many people. There's something called an onLoad event. Just as a mouseOver can detect when the mouse is over an image, and an onClick can tell when an image is clicked, the onLoad can detect when an image has been completely downloaded into your browser. I want the script to make a decision about what to do after an image has been fully download or is not fully download. This can be done by requiring the onLoad to return a value (returnValue). If the return value is "true" then I want the script to "proceed=true." If the return value is false, then I want the script to "proceed=false" or in other words, to stop. I just need some help with the syntax for this. It would look something like this:

    document.firstImage.src = "LIC-1.bmp"; onLoad="returnValue(); if return true;" {proceed=true} else {proceed=false}

    There's nothing wrong with the concept of this -- Until the picture completely loads into the browser's cache, the script is temporarily halted. The only problem is the syntax so I just need someone to show me the proper way to compose the line above.

  • #7
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've had success with this sequential content revealer script.
    Last edited by mcdougals4all; 01-12-2005 at 11:36 PM. Reason: I can't spell
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #8
    New Coder
    Join Date
    Jan 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Glenn:

    That script was the best yet so far. Take a look at the test page:

    http://www.jeffs-icons.com/LoadTest/sequence5.html

    The images clearly loaded ONE AT A TIME and they loaded in a perfect sequence from pic #1 (at the bottom of the page to pic #5 (at the top). Could you explain a little about how it does this. The only thing I want now is absolute perfection. What wasen't perfect? -- the "default.gif" images that are substituted until the desired images are rendered. Normally, when images are called for, lets say from the document body, no image is shown at all until the browser determines that the desired image simply cannot be found -- if it can't be found, it's at that point that browser makes a substitute using the default, white square with the three shapes in it. In our test document, the page starts right off with the default images showing, and are later replaced as the desired images start to load into the browser. The idea is to make the whole thing look like a normal page load which never shows a default image as long as the desired images can be found. Of course, the default images appear because you have image tags which call for exactly that -- a default image:

    #1 <img id="Image1" src="default.gif" /><br />

    It would not work this way -- correct me if I'm wrong -- by using my proposed method of controlled image downloads. Let's call it the "start/stop" method as descibed in my own reply post above this one. When using a typical "image preload" script, there are image tags in the body that call for the same images in the script, but default images are never shown -- you get just an empty space -- and that's because you'll have a NAME attribute in each image which puts them under direct control of the script. The script never asks for a default image, so you won't get one appearing on the page -- unless the browser has tried its best to find a desired image and decides to quit searching for it. With my proposed method, the script doesn't actually stop -- it waits; it waits while a given picture is being transfered down the wire and it's just happy that the picture file has been found and is not worried about how long it takes to download the image as long as the download is more or less continous and will therefor not render a single default images even if there are a hundred images left to be downloaded. Once a given image is completely in the cache, it calls for the next image and loads each, one by one, until all 100 desired images are in the cache without ever showing a default image (providing that the browser can actually find all 100 desired images). I won't be content until I can prove this to be right or wrong -- and I can't prove this until someone shows me how to make a script that will halt and continue the script depending on the returnValue of an onLoad.

    Again, here's the line I need help with:

    document.firstImage.src = "LIC-1.bmp"; onLoad="returnValue(); if return true;" {proceed=true} else {proceed=false}

    I only need help with the proper syntax of this one line and nothing else!
    Last edited by icon kid; 01-13-2005 at 11:26 PM.

  • #9
    New Coder
    Join Date
    Jan 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    mcdougals4all:

    I've had success with this sequential content revealer script.
    This "sequential content revealer" looks very good based on the description at the site that provides the script. I'll make another post about it tomorrow after I've tested it for myself.

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Create a 1x1 pixel transparent image and name it as default.gif

    What my code does is load the first image from the array of images. If the loading of the first image is successful, the succeeding images will load in the same manner, and if in any point, an image failed to load for whatever reason, the loading of succeeding images will halt.

    My code applies recursion, calling itself only (to load the next image) when the loading of the current image succeeds.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #11
    New Coder
    Join Date
    Jan 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Glenn:

    Create a 1x1 pixel transparent image and name it as default.gif
    This did not work. I created a 10x10-pixel transparent GIF image (yes, I know you said 1x1) and named it "default.gif" and uploaded it to the directory where my test files are. I also put width and height values for the default images and a <P ALIGN=center> tag because I wanted to see if I could still control the page layout. The images aligned in the center of the page but the browser won't use my transparent GIFs! -- it still uses the default image that's built into the browser. I thought I would fool the browser by changing the name from "default.gif" to "blank.gif" and made sure I had a picture with that name in the test folder but the browser insists on using it's built in version. What should I try next.

    It would be so much simpler if you could just show me the proper syntax for this line.

    document.firstImage.src = "LIC-1.bmp"; onLoad="returnValue(); if return true;" {proceed=true} else {proceed=false}

  • #12
    New Coder
    Join Date
    Jan 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    mcdougals4all:

    Well, mcdougals4all, you get the credit for providing the source for a script that does exactly what I need it to do without any drawbacks or significant limitations; it even works in Netscape -- thank you. Here's the link to my final, succesfull test:

    http://www.jeffs-icons.com/LoadTest/sequence6.html

    Here's the link, again, where one can get the code and instructions:

    http://www.dynamicdrive.com/dynamicindex17/seqreveal.htm

    I must also thank glenngv for his help and patience with me, and thank A1ien51 (Eric) for listing some of his resources. Before this thread is ended, it would still be good to here from glenngv on my last comments about his script (about the GIFs), and even though my own "start/stop" version of a sequential picture loading script would not have worked in Netscape, I'd still like to know if he can show me the correct syntax for this line of code:

    document.firstImage.src = "LIC-1.bmp"; onLoad="returnValue(); if return true;" {proceed=true} else {proceed=false}

    If anyone else knows the correct way to write this line, then please step forward.

  • #13
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by icon kid
    Glenn:
    This did not work. I created a 10x10-pixel transparent GIF image (yes, I know you said 1x1) and named it "default.gif" and uploaded it to the directory where my test files are. I also put width and height values for the default images and a <P ALIGN=center> tag because I wanted to see if I could still control the page layout. The images aligned in the center of the page but the browser won't use my transparent GIFs! -- it still uses the default image that's built into the browser. I thought I would fool the browser by changing the name from "default.gif" to "blank.gif" and made sure I had a picture with that name in the test folder but the browser insists on using it's built in version. What should I try next.
    Is this the updated page that has my suggested script? I checked blank.gif and this image does not exist in the LoadTest directory.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #14
    New Coder
    Join Date
    Jan 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Glenn:

    ...made sure I had a picture with that name in the test folder...
    I wasen't as sure as I thought. I uploaded the blank.gif this afternoon. The result was the same, though. Try the link again.

    Load Test 5

    Is there anything else I can try for making the default image not appear?

  • #15
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    You missed a couple of quotes.

    <img id="Image5" src="blank.gif WIDTH=80 HEIGHT=80" />

    The source of the image is

    src="blank.gif WIDTH=80 HEIGHT=80"

    and not blank.gif

    Try this:

    <img id="Image5" src="blank.gif" WIDTH="80" HEIGHT="80" />
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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