Web Analytics Made Easy - StatCounter Slide show: Does the # of pic increase the loading time? - CodingForum

Announcement

Collapse
No announcement yet.

Slide show: Does the # of pic increase the loading time?

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Slide show: Does the # of pic increase the loading time?

    Slide show: Does the # of pic increase the loading time?

    Obviously, having more pictures on a website increases the loading time. A slide show, however, doesn't show them all immediately. So, I was wondering, does the slide show have to "pre-load" all of the pictures FIRST before it starts or does it load the pictures only when it is ready to use them.

    The reason I was wondering was because as I was testing the slide show on my computer, it seems to increase the loading time as I increase the number of pictures on my list. For example, a list with 5 pictures seems to load quicker than a list with 20 pictures.

    There is another reason I thought there might be a "pre-load." The first time I use the script it takes quite a while to load However, every time after the first use, it loads very quickly. If I reboot my computer and try it again, the first use takes a longer time. My script is currently displaying 4 pictures side by side and each list has 3 pictures in it. That means there is a total of 12 pictures. The thing that confuses me even more is the fact that the pictures are small (10 k each). That shouldn't take a computer (running at 2 G) very long to "pre-load."

    I would like to point out that I am NOT loading the webpage from the Internet (so there are no delays because of bandwidth problems), I am loading it directly from my hard drive. The way I test the webpage is I go to Windows Explorer and double click on my htm file. I'm assuming that part of the delay (for my first use) is because IE needs to load on my computer.

    Any ideas? The program I am making will run off a CD and not the Internet. Therefore, I was hoping to be able to have a large list of pictures (around 100). However, if all 100 pictures need to pre-load before it can start, the delay will be too great.

    One last thing. The javascript that this program calls (JSFX_SimpleSlideShow.js -obtained from http://www.JavaScript-FX.com ) is only 4k, so that shouldn't cause any major delays.



    ***********************************


    <!-- ZoneLabs Privacy Insertion -->
    <script language='javascript' src='http://127.0.0.1:3009/js.cgi?pcaw&r=19895'></script>

    <SCRIPT LANGUAGE="javascript" SRC="javascript/JSFX_SimpleSlideShow.js" TYPE="text/javascript"></SCRIPT>
    <SCRIPT LANGUAGE="JavaScript">

    mySlide1 = new JSFX.SimpleSlideShow();
    mySlide1.addSlide("1 temp 1.jpg");
    mySlide1.addSlide("1 temp 2.jpg");
    mySlide1.addSlide("1 temp 3.jpg");
    mySlide1.setStartDelay(0);
    mySlide1.setSlideDelay(4);
    mySlide1.setTransType(24);
    mySlide1.setTransDuration(.75);


    mySlide2 = new JSFX.SimpleSlideShow();
    mySlide2.addSlide("1 temp 5.jpg");
    mySlide2.addSlide("1 temp 6.jpg");
    mySlide2.addSlide("1 temp 7.jpg");
    mySlide2.setStartDelay(2);
    mySlide2.setSlideDelay(4);
    mySlide2.setTransType(24);
    mySlide2.setTransDuration(.75);

    mySlide3 = new JSFX.SimpleSlideShow();
    mySlide3.addSlide("1 temp 8.jpg");
    mySlide3.addSlide("1 temp 9.jpg");
    mySlide3.addSlide("1 temp 10.jpg");
    mySlide3.setStartDelay(1);
    mySlide3.setSlideDelay(4);
    mySlide3.setTransType(24);
    mySlide3.setTransDuration(.75);

    mySlide4 = new JSFX.SimpleSlideShow();
    mySlide4.addSlide("1 temp 11.jpg");
    mySlide4.addSlide("1 temp 12.jpg");
    mySlide4.addSlide("1 temp 13.jpg");
    mySlide4.setStartDelay(3);
    mySlide4.setSlideDelay(4);
    mySlide4.setTransType(24);
    mySlide4.setTransDuration(.75);

    function JSFX_StartEffects()
    {
    mySlide1.start();
    mySlide2.start();
    mySlide3.start();
    mySlide4.start();
    }

    </SCRIPT>
    <!-- *** END CUT - End Code *** -->

    </head>

    <BODY TEXT="#000000" LINK="#FFFF00" VLINK="#FFFF00" ALINK="#FF0000" onload="JSFX_StartEffects()">
    <CENTER>
    <FONT FACE="Arial">
    <script> document.write(mySlide1.toHtml());</script>
    <script> document.write(mySlide2.toHtml());</script>

    <script> document.write(mySlide3.toHtml());</script>
    <script> document.write(mySlide4.toHtml());</script>
    </P>
    </CENTER>
    </font>
    <BODY>


    <!-- ZoneLabs Popup Blocking Insertion -->
    Tags: None
  • #2
    Yes preloading the images is like they are all sitting there on the page hardcoded there. Now it loads faster the next time the person visits since the image are sitting in the cache.

    If you are doing it off a CD it will not be that noticable compared to a dial up user on the net.

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

    Comment

    • #3
      You could theoreticly make a slide show that preloaded pictures as needed by.

      Only think it requires is one:
      1. you know how long it takes to load a single picture.
      2. the time of show of each picture.
      3. load a picture so far ahead that option 1=option 2*numberofpictures

      in theory that is probably some more things to take into consideration and all .
      but if it is running from a cd a preloader makes little sense since preloaders are meant for the slowness of the web, cd's are like 1000's time faster loaders

      Comment

      • #4
        That particular slide show does load all the pictures in a loop when it starts. Even from a CD the images will have to be transferred from the CD to the browser cache.

        I have used that script for my own CD slideshow but I didn't notice any slowdown. You could open up the ".js" file and remove the pre-load loop to see if that helps.

        I have a modified version of that script that uses the image "onload" event to load the next picture while the current one is being displayed. That way only 1 image at a time is "pre loaded" and the slideshows loads a lot quicker.

        I haven't published the script yet as
        1) I am not yet happy with the preloading. It needs to start loading the next picture as soon as the current one is displayed.
        2) my hardrive crashed recently and I am still putting things back together from my backup CD's.

        If you want I can attach a copy here if you want to see if it works for you.

        Cheers
        Roy.
        P.S. Even though you are not publishing the slideshow on the web please ensure the copyright information is displayed above where you include the ".js" file. I work hard writing, testing & debugging the scripts and would like to keep a little of the credit.
        The answer does not come from thinking outside the box, it comes from realizing the truth :-
        "There Is No Box". [JavaScript Gadgets'n'Gizmos][JavaScript-FX]

        Comment

        • #5
          Yes, I would like to look at the pre-loader

          Thanks for your replies. I appreciate it guys. It's nice having people out there that are willing to answer questions.

          Roy, you mentioned that you were willing to attached a copy of the pre-loader that you are working on. Yes, I would like to see it.

          PS, yes I still have the copyright info on my actual program.

          PPS, what program do you use to edit the actual "js" file. I have referenced "js" files before, but I have never had to edit the actual file. So far, I am only using FrontPage to edit the coding I am working on.

          PPSS, since I am asking a bunch of quesions, I'll ask one more. FrontPage is okay for simple coding, but I have found that its a real pain for complicated coding. There are no real debugging features. It tells you that there's a error on line 128, but since the lines of coding are not numbered, it's pretty useless. So, what is a good debugging program for javascript etc.

          Thanks

          Comment

          • #6
            I use homesite.
            Not that I have ever seen frontpage but it is standard to write the line numbers in the status bar in the bottom of editors

            Comment

            • #7
              Here's a modified version.
              You need to create trans slide shows with this one
              e.g.

              mySlide1 = new JSFX.TransSlideShow();

              but everything else should be the same.
              Attached Files
              The answer does not come from thinking outside the box, it comes from realizing the truth :-
              "There Is No Box". [JavaScript Gadgets'n'Gizmos][JavaScript-FX]

              Comment

              • #8
                Thanks

                Thanks Garadon, after I looked at you posting, I checked FrontPage and they also have the line numbers at the bottom. I'm not sure how I missed that before.


                Thanks Roy for the coding. I'll download it and work on it later today. Thanks again. PS thanks for the original coding too.

                Comment

                Previous template Next
                Working...
                X