Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 173
  • Last Modified:

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
0
Mutley2003
Asked:
Mutley2003
  • 4
  • 2
1 Solution
 
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
 
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
hemebondCommented:
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
 
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now