Progressive Image Load and Switch

js gurus

I am trying to design some code to accomplish the following
* I have a list of images to be loaded, some of which are large
* assume a slow connection
* as each image is loaded I want it placed in another array which is cycled through on a timer and displayed in another window (the same window for all images). So, this array gets bigger as each of the images arrive.  So, when we have only 1 image, this just stays there unchanging. If we have 2 images (A and B) and the timer interval is 20 seconds, we would see A B A in the first minute, assuming C has not arrived. If C arrives any time during the first display of A or B then we would see A B C in the first minute.

I imagine this can be accomplished using the onload method of the Image object and the settimeout (or is it SetTimeout?) method of window (or Window? .. this case sensitivity is driving me nuts) .. but I am a js novice, so code that puts it all together would be nice

thanks
Mutley2003Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
hemebondConnect With a Mentor Commented:
I'd like some credit if you're going to post my code Viola.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
      <head>
            <title>Q_21151825</title>
            <style type="text/css">
                  ul      {
                        position:relative;
                  }
                  li      {
                        position:absolute;
                        z-index:0;
                  }
            </style>
      </head>
      <body>
            <ul>
                  <li><img src="/images/1.jpeg"></li>
                  <li><img src="/images/2.jpeg"></li>
                  <li><img src="/images/3.jpeg"></li>
                  <li><img src="/images/4.jpeg"></li>
                  <li><img src="/images/5.jpeg"></li>
            </ul>
      </body>
      <script type="text/javascript">
            var current = 0;
            var next = 1;
            var list = document.getElementsByTagName("li");

            for(var i = 0; i < list.length; i++)
            {
                  list[i].style.zIndex = 0;
            }
            list[current].style.zIndex = 1;

            setInterval("change()",1000);

            function change()
            {
                  list[current].style.zIndex = 0;
                  list[next].style.zIndex = 2;
                  current = next;

                  for(var i = 0; i < list.length; i++)
                  {
                        next++;
                        if(next == list.length)
                        {
                              next = 0;
                        }
                        if(list[next].firstChild.complete == true && list[next].firstChild.width > 0)
                        {
                              break;
                        }
                  }
            }
      </script>
</html>
0
 
viola123Commented:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
     <head>
         <title>Image Scrolling</title>
          <style type="text/css">
               ul     {
                    width:480px;
                    height:80px;
                    padding:0;
                    list-style:none;
                    position:relative;
                    overflow:hidden;
               }
               ul li     {
                    position:absolute;
                    -moz-opacity:0.5;
               }
               ul li:hover     {
                    -moz-opacity:0.99;
               }
          </style>
          <script type="text/javascript">
               var width = 0;
               var slideshow;
               var list;
               var img;

               var DELAY = 100;
               var STEP = 4;

               function init()
               {
                    slideshow = document.getElementById("slideshow");
                    list = slideshow.getElementsByTagName("li");
                    img = slideshow.getElementsByTagName("img");

                    var offset = 0;
                    for(var i = 0; i < list.length; i++)
                    {
                         offset += (i > 0) ? img[i - 1].width : 0;
                         list[i].style.left = offset + "px";
                         width += img[i].width;
                    }
                    move();
               }
               function move()
               {
                    for(var i = 0; i < list.length; i++)
                    {
                         var left = list[i].style.left.slice(0,-2) - STEP;
                         list[i].style.left = left + "px";

                         if(left <= -(img[i].width))
                         {
                              list[i].style.left = width - img[i].width + "px";
                         }
                    }
                    setTimeout("move()",DELAY);
               }
               window.onload = init;
          </script>
     </head>
     <body>
          <ul id="slideshow">
               <li><img src="1.jpg"></li>
               <li><img src="2.jpg"></li>
               <li><img src="3.jpg"></li>
               <li><img src="4.jpg"></li>
               <li><img src="5.jpg"></li>
          </ul>
     </body>
</html>
0
 
Mutley2003Author Commented:
That was quick! Trying it now, thanks

0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Mutley2003Author Commented:
OK, I tried it (cute) and studied the code, but it does not seem to address my concern about slow loading images. I don't want to preload them all, just work with them in the sequence they arrive over a slow connection.
0
 
Mutley2003Author Commented:
hemebond

that works, thanks. It seems to rely on the script being outside the <body> </body> tags .. I have never seen that before. I guess that makes this approach difficult to put in external js?

0
 
hemebondCommented:
Not at all. By moving the script to the bottom of the page, outside the body, the page is able to load before the script attempts to modify it. It also means the visitor will see the page sooner, because they're not waiting for the script to download. You can move it to an external file, and you'll get all the same benefits (and more).
0
 
Mutley2003Author Commented:
ok, that's cool. It has started me thinking of ways of using an external script outside the body. thanks

0
All Courses

From novice to tech pro — start learning today.