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.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Please could someone explain how this script works

    Hi,
    I am fairly new to Javascript and require some help. I would be very appreciative if someone could take the time to explain how the following script works. I understand the first part about defininng the variables and images but i am unsure as to how the array and functions work. If someone could explain what the various parts of the code do I would be most greatful.

    <html>
    <head>
    <script type="text/javascript">
    <!--


    var pic_width=100;
    var pic_height=100;


    var button_text="Next Image";


    if (document.images)
    {
    pic1= new Image(pic_width,pic_height);
    pic1.src="image1.jpg";
    pic2= new Image(pic_width,pic_height);
    pic2.src="image2.jpg";
    pic3= new Image(pic_width,pic_height);
    pic3.src="image3.jpg";
    pic4= new Image(pic_width,pic_height);
    pic4.src="image4.jpg";
    pic5= new Image(pic_width,pic_height);
    pic5.src="image5.jpg";
    }

    var pics= new Array(5)
    pics[0]=pic1.src;
    pics[1]=pic2.src;
    pics[2]=pic3.src;
    pics[3]=pic4.src;
    pics[4]=pic5.src;

    var numpics=5;
    var thenum=0;
    imgName="img1";

    function change_it()
    {
    if (document.images)
    {
    document.write("<IMG SRC='"+pics[thenum]+"' border='0' width='"+pic_width+"' height='"+pic_height+"' name='img1'>\n");
    document.write("<BR><FORM><INPUT TYPE='button' value='"+button_text+"' onClick='change_it2()'></FORM>");
    }
    }

    function change_it2()
    {
    var x=0;
    thenum+=1;

    if (thenum>numpics-1)
    {
    document[imgName].src=pics[0];
    thenum=0;
    }
    else
    {
    document[imgName].src=pics[thenum];
    x+=1;
    }
    }
    //-->
    </script>

    <script type="text/javascript">
    <!--
    change_it();
    //-->
    </script>

    </head>
    <body>

  • #2
    Regular Coder
    Join Date
    Oct 2006
    Posts
    107
    Thanks
    3
    Thanked 5 Times in 5 Posts
    I don't know how it works, but I know what I'm familiar with. It's like riding a bicycle, I'll never be a teaCHER.
    Anyways, I messed with a bit and changed it so the only thing you have to do is load the pic array with images, 1 to 100, no other messing with the code.


    <html>
    <head>
    <script type="text/javascript">
    <!--
    var pics= new Array('one.gif','two.gif','three.gif');

    var pic_width=100;
    var pic_height=100;
    var pic=new Array()

    var button_text="Next Image";


    if (document.images){
    for(i=0;i<=pics.length-1;i++){
    pic[i]= new Image(pic_width,pic_height); pic[i].src=pics[i];
    }
    }

    var thenum=0;
    imgName="img1";

    function change_it(){
    if (document.images){
    document.write("<IMG SRC='"+pics[thenum]+"' border='0' width='"+pic_width+"' height='"+pic_height+"' name='img1'>\n");
    document.write("<BR><FORM><INPUT TYPE='button' value='"+button_text+"' onClick='change_it2()'></FORM>");
    }
    }

    function change_it2(){
    var x=0;
    thenum+=1;

    if (thenum>pics.length-1){
    document[imgName].src=pics[0];
    thenum=0;
    }
    else{
    document[imgName].src=pics[thenum];
    x+=1;
    }
    }
    //-->
    </script>

    <script type="text/javascript">
    <!--
    change_it();
    //-->
    </script>

    </head>
    <body>

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Or slightly simpler

    PHP Code:
    <HTML>
    <
    HEAD>
    <
    TITLE>Document Title</TITLE>

    <
    script type="text/javascript">
    <!--
    var 
    pics= new Array('one.gif','two.gif','three.gif');

    preload=new Array()

    for(var 
    i=0;i<pics.length;i++){
    preload[i]=new Image();
    preload[i].src=pics[i];
    }

    var 
    thenum=1;

    function 
    changeIt(){

    document.img1.src=pics[thenum];

    thenum++;
    if (
    thenum==pics.length){
    thenum=0;
    }

    }

    //-->
    </script>

    <style type="text/css">
    #img1{
    width:100px;
    height:100px;
    }
    </style>

    </HEAD>
    <BODY>

    <img src="one.gif" border="0"' id="img1" name="img1"><BR>
    <input type="button" value="Next Image" onclick="changeIt()">

    </BODY>
    </HTML> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #4
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the info guys but really I was after a brief explaination of what different parts of the code actually do. So if anyone can explain it it would be very helpful.cheers.

  • #5
    Regular Coder
    Join Date
    Oct 2006
    Posts
    107
    Thanks
    3
    Thanked 5 Times in 5 Posts
    Now that MrJ has made life simple, it could be explained without much headache. It all looks simple enough to me, each bit of text in the code has a self-describing definition except for "preload" which implies to me that the array of images are all loading up before you click the button that calls for them.
    I have yet to have any practical luck with preloading scripts.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    What the script does is to make sure that all of the referenced images get loaded as part of the page loading process even though those images are not yet actually referenced by the HTML (if they are in the HTML then the code has no effect at all).

    After the page finishes loading you can then swap one image in the page for another knowing that the image that is being inserted into the page and displayed has already been downloaded along with the rest of the page content.

    If you don't use that script then image swaps in the page can still be done but the first time that a swap to an image not already downloaded is requested there will be a delay while the requested image is downloaded.

    If you are not doing image swaps in the current page then the only other reason why you would use such a script is to download images that you expect will be needed by the next page that is visited in order to speed up the loading of the following page by making the current page load slower. Unless you are certain of what page your visitors will visit next and the current page doesn't contain very much of anything at all then preloading images for subsequent pages is not a good idea. You want to make sure that each page downloads in a reasonable time (80k is a high figure to use for the absolute maximum combined size of all of the files downloaded to display one page and for your home page a combined size under 40k is a good target).
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Yep, I should have called it preloadImages
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.


  •  

    Posting Permissions

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