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 13 of 13
  1. #1
    New Coder
    Join Date
    Jun 2004
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Improving My javascript

    I was wondering if I can improve this piece of javascript; it does an image preoload:

    Code:
    function preload(img1, img2, img3, img4, img5, img6, img7, img8, img9, img10, img11, img12, img13, img14, img15)
    	{
    	if(document.images)
    		{
    		var img = [new Image, new Image, new Image, new Image, new Image, new Image, new Image, new Image, new Image, new Image, new Image, new Image, new Image, new Image, new Image];
    		img[0].src = img1;
    		img[1].src = img2;
    		img[2].src = img3;
    		img[3].src = img4;
    		img[4].src = img5;
    		img[5].src = img6;
    		img[6].src = img7;
    		img[7].src = img8;
    		img[8].src = img9;
    		img[9].src = img10;
    		img[10].src = img11;
    		img[11].src = img12;
    		img[12].src = img13;
    		img[13].src = img14;
    		img[14].src = img15;
    		}
    	else
    		{
    		img[0].src = "";
    		img[1].src = "";
    		img[2].src = "";
    		img[3].src = "";
    		img[4].src = "";
    		img[5].src = "";
    		img[6].src = "";
    		img[7].src = "";
    		img[8].src = "";
    		img[9].src = "";
    		img[10].src = "";
    		img[11].src = "";
    		img[12].src = "";
    		img[13].src = "";
    		img[14].src = "";
    		document.images = "";
    		}
    	}

  • #2
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72° W. 48' 57" , 41° N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    a couple of suggestions:

    instead of numbering all the images you'll pass to the function, why not use the functions arguments property, so that you can more easily change the number of images that you want to pre-load. you can learn about the arguments property here: http://www.devguru.com/Technologies/...arguments.html

    secondly, you can pretty much do away with that "else" clause, especially since, the way you have things set up, the img array won't even be defined if document.images doesn't exist.
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.

  • #3
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Below is a preloading (postloading so the initial page load is not stalled) sequential image slideshow I use... The comments should be self explanatory... But the essence of the script is to simularly name but sequentialy number the images... In this example the images are: eliza1, eliza2, eliza3 and eliza4... All that matters is that the number is last and there are no leading zero's (001)....

    Code:
    <html>
    <head>
    <title>Post Load And Display Sequentially Numbered Images</title>
    <BASE HREF="http://www.freewebs.com/foufou/">
    <script type="text/javascript">
     <!--// WRITTEN BY: WillyDuitt@hotmail.com  02/04/2004 //;
     // PLEASE BEGIN BY ANSWERING THE FOLLOWING QUESTIONS! //;
     // HOW MANY SEQUENTIAL IMAGES WOULD YOU LIKE TO SHOW? //;
        var howMany = 4;
     // USING QUOTES. WHAT IS THE PATH TO THE FIRST IMAGE? //;
        var firstImage  = 'eliza1.jpg';
     // HOW MANY SECONDS BEFORE CHANGING IMAGES(.5 = ½sec) //;
        var speed = 5;
     // USING QUOTES. USE FILTERS FOR IE USERS(yes | no)?  //;
        var filters = "yes";
    
     ////////////////////////////////////////////////////////;
     // GLOBAL VARIABLES NO NEED TO EDIT BEYOND THIS POINT //;
        var startNumber = (/\d+(?=\.)/.exec(firstImage));
        var lastNumber  = (startNumber*1)+(howMany-1);
        var nextImage   = (startNumber);
    
      function loadSlides(){
        for(var i=startNumber;i<=lastNumber;i++){
        var postLoad = new Array();
            postLoad[i] = new Image();
            postLoad[i].src = firstImage.replace(/\d+(?=\.)/,i);
        }   showSlides("slider");
      }
    
      function showSlides(slider){
       var image = document.images[slider];
        if(document.all && filters.toLowerCase() == "yes"){
           image.style.filter = "blendTrans(duration=3)";
           image.filters.blendTrans.Apply();
           image.filters.blendTrans.Play();
        }    if(nextImage > lastNumber){ nextImage = startNumber };
                image.src = firstImage.replace(/\d+(?=\.)/,nextImage);
                setTimeout('showSlides("slider")',speed*1000);
                nextImage++;
      }
     //-->
    </script>
    </head>
    
    <body onload="loadSlides()">
     <div style="text-align:center;width:350px;height:280px">
      <img name="slider" width="350" height="280" src="eliza1.jpg">
       </div>
    
    </body>
    </html>
    .....Willy

  • #4
    New Coder
    Join Date
    Jun 2004
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Willy, thanks, that's interesting javascript, I might use it for a slideshow later; but I'm just preloading.

    joh6nn: I tried to follow your suggestions, and here's what I got:

    PHP Code:
    function preload()
        {
        var 
    img = new Array();
        for (
    number 0number preload.arguments.lengthnumber++)
            {
            if(
    document.images)
                {
                
    img[number] = new Image();
                
    img[number].src preload.arguments[number];
                }
            else
                {
                
    img[number] = "";
                
    img[number].src "";
                
    document.images "";
                }
            }
        } 
    Is that good enough?

    Or:

    PHP Code:
    function preload()
        {
        var 
    img = new Array();
        var 
    number 0;
        for (
    number in img)
            {
            
    number preload.arguments.length
            
    number++;
            if(
    document.images)
                {
                
    img[number] = new Image();
                
    img[number].src preload.arguments[number];
                }
            else
                {
                
    img[number] = "";
                
    img[number].src "";
                
    document.images "";
                }
            }
        } 
    Or:

    PHP Code:
    function preload()
        {
        var 
    img = new Array();
        var 
    number 0
        while (
    number preload.arguments.length)
            {
            
    number++; 
            if(
    document.images)
                {
                
    img[number] = new Image();
                
    img[number].src preload.arguments[number];
                }
            else
                {
                
    img[number] = "";
                
    img[number].src "";
                
    document.images "";
                }
            }
        } 
    Or:

    PHP Code:
    function preload()
        {
        var 
    img = new Array();
        var 
    number 0
        do 
            {
            
    number++; 
            if(
    document.images)
                {
                
    img[number] = new Image();
                
    img[number].src preload.arguments[number];
                }
            else
                {
                
    img[number] = "";
                
    img[number].src "";
                
    document.images "";
                }
            }
        while (
    number preload.arguments.length)
        } 
    Last edited by ampulator00; 12-17-2004 at 06:57 AM.

  • #5
    New Coder
    Join Date
    Jun 2004
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Looping help

    I was thinking was it possible to make a for loop with this piece of javascripot code? This is a slidshow script. I want it to make the variable "thisPic" to loop, as long as their as is an image or set of images to slideshow.

    PHP Code:
    var thisPic = [00000];
    function 
    chgSlide(changedirection)
        {
        if(
    document.images)
            {
            
    thisPic[change] += direction;
            
    imgCt = (imageChoice[change].length -&& altChoice[change].length -1);
            if(
    thisPic[change] > imgCt)
                
    thisPic[change] = 0;
            if(
    thisPic[change] < 0)
                
    thisPic[change] = imgCt;
            
    document.getElementById(slideID[change]).src imageChoice[change][thisPic[change]];
            
    document.getElementById(slideID[change]).alt altChoice[change][thisPic[change]];
            }
        } 

  • #6
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Willy, thanks, that's interesting javascript, I might use it for a slideshow later; but I'm just preloading.
    I assumed you would take and only use the preloading feature (loadSlides()) along with the necassary variables which provided the values for the firstImage, howMany, firstNumber, lastNumber, ect...

    I use that routine on many of my scripts because of its benifit of only needing to declare the first image path and how many sequential images will be used... Plus, it doesn't matter if the first image is img1 or img56...

    .....Willy

  • #7
    New Coder
    Join Date
    Jun 2004
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Willy Duitt
    I assumed you would take and only use the preloading feature (loadSlides()) along with the necassary variables which provided the values for the firstImage, howMany, firstNumber, lastNumber, ect...

    I use that routine on many of my scripts because of its benifit of only needing to declare the first image path and how many sequential images will be used... Plus, it doesn't matter if the first image is img1 or img56...

    .....Willy
    I'll keep that in mind.

  • #8
    New Coder
    Join Date
    Jun 2004
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Um... don't mean to do this, but what does anyone think of the changes I did to the script?

  • #9
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72° W. 48' 57" , 41° N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    the changes you made are a lot better than the script you started off with. frankly, in mind, that you thought about improving it at all puts you at a higher level than most javascripters. and the fact that you asked "how do i fix this?" instead of "will you fix this for me" is another step up.

    there's still room for improvement in your script, of course (i still don't understand why you've got that 'else' statement, but that just might be me), but you've definitely made a step in the right direction.
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.

  • #10
    New Coder
    Join Date
    Jun 2004
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you.

    But I was wondering, do they work? the thing is, my internet connection loads too fast for me tell if they work or not... So I need an outside tester.

  • #11
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ampulator00
    Thank you.

    But I was wondering, do they work? the thing is, my internet connection loads too fast for me tell if they work or not... So I need an outside tester.
    Use alerts to check if the script is doing what you want...
    Soemthing like: img[number].onload=alert(img[number]+' has loaded')

    Or, clear your temporary internet files, run the script and then check if all the images are cached in your TIF...

    Besides, unless I missed it, you did not provide a link fro anyone to test... If you are asking someone to build an entire document including images to run and test your script, you are asking quite alot...

    .....Willy

  • #12
    New Coder
    Join Date
    Jun 2004
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh, yeah, heh. Thanks for the tip.

  • #13
    New Coder
    Join Date
    Jun 2004
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    BTW, this isn't about the preload script, but how do I loop a variable?

    Here's the javascript: http://www.codingforums.com/showpost...92&postcount=5

    Willy: Thanks Man! That thing worked out great!

    Here's the final javascript:

    PHP Code:
        {
        var 
    img = new Array();    
        for (var 
    number 0number preload.arguments.lengthnumber++)
            {
            if(
    document.images)
                {
                
    img[number] = new Image();
                
    img[number].src preload.arguments[number];
                
    img[number].src.onload alert(preload.arguments[number] + " has loaded");
                }
            else
                {
                
    img[number] = "";
                
    img[number].src "";
                
    document.images "";
                }
            }
        } 
    Last edited by ampulator00; 12-20-2004 at 08:04 AM.


  •  

    Posting Permissions

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