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 8 of 8

Thread: Preload images

  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Preload images

    I am trying to load 4 images next to each other from an array I have created. So far I have not been able to get them to display. Not sure what I am doing wrong.

    Array:
    Code:
    var imgs = new Array('images/boat.jpg','images/desert_isle.jpg','images/greenscene.jpg','images/house.jpg','images/logo.jpg')
    my code internal code:
    Code:
    <div id="headpanel">
    <script src="randimg_soln.js" type="text/javascript">
    document.getElementById("imgs")
    </script>
    </div>
    Thanks,
    GJ

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Try this:-


    Code:
    <head>
    <script type = "text/javascript">
    
    var arImages=new Array();
    
    function Preload() {
    var temp = Preload.arguments; 
    for (i=0; i < temp.length; i++) {
    arImages[i]=new Image();
    arImages[i].src=temp[i];
    }
    }
    
    Preload('one.gif','two.gif','three.gif','four.gif');  // start loading now 
    
    </script>
    </head>
    
    <body>
    
    <div id="headpanel">
    <img name="myimage1" src="one.gif">
    <img name="myimage2" src="two.gif">
    <img name="myimage3" src="three.gif">
    <img name="myimage4" src="four.gif">
    </div>
    Naturally you will need to change the names of the images to those applicable to your site.



    A teacher informed my son that "There are two words which you should never use in school homework - one is cool and the other is gross". "No problem", replied the boy, "What are the two words?"
    Last edited by Philip M; 03-16-2009 at 04:51 PM.

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks,

    Now i have to added in 12 more images and have them randomly display when the page is refreshed. So I took the function and placed it in an external js file, and I have created a random function. I am not sure how to get my images to randomly display.

    Rand function:
    Code:
    function rand(size){
      var rNum=Math.ceil(Math.random()* 16);
      return rNum;
    }
    
    var randValue = randInt(16);
    var images = NewImage[randValue];

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Try this to shuffle your images into random order:-

    Code:
    var imgArray = ['img1.gif','img2.gif','img3.gif','img4.gif','img5.gif', 'img6.gif', 'img7.gif', 'img8.gif', 'img9.gif', 'img10.gif'];
    function randOrd(){return (Math.round(Math.random())-0.5); }
    imgArray.sort(randOrd);
    var pic1 = imgArray[0]; // first random image
    var pic2 = imgArray[1]; // second random image
    var pic3 = imgArray[2]; // third random image
    var pic4 = imgArray[3]; // fourth random image
    
    // and so on
    
    alert (imgArray);
    
    for (var i =0; i<imgArray.length; i++) {
    document.write("<img src = imgArray[i]>")
    }
    Last edited by Philip M; 03-16-2009 at 06:55 PM.

  • Users who have thanked Philip M for this post:

    gj0519 (03-16-2009)

  • #5
    New Coder
    Join Date
    Feb 2009
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I don't get any images to display, right now I added that into my html code and maybe I have something wrong in here. Ideally I want to put the script in a js file and just call that to keep my code cleaner.

    Code:
    <body onLoad="randOrd">
    <div id="wrapper">
    <div id="logo"><img src="images/logo.gif" alt="" /></div>
    <script type="text/javascript">
    Var imgArray = ['images/boat.jpg','images/desert_isle.jpg','images/greenscene.jpg','images/house.jpg','images/logo.jpg','images/Mountain.jpg'];
    
    function randOrd() {return (Math.round(Math.random())-0.5);}
    imgArray.sort(randOrd);
    var pic1 = imgArray[0];
    var pic2 = imgArray[1];
    var pic3 = imgArray[2];
    var pic4 = imgArray[3];
    var pic5 = imgArray[4];
    var pic6 = imgArray[5];
    
    alert (imgArray);
    </script>
    </head>
    <script type="text/javascript">
    <div id="headpanel">
    for(var i = 0; i < imgArray.length; i++) {
       document.write("<img src= imgArray[i]>")
       }
    
    </script>
    </div>
    Thanks,

    GJ

  • #6
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    Shouldn't this:
    Code:
    <script type="text/javascript">
    <div id="headpanel">
    be like that:
    Code:
    <div id="headpanel">
    <script type="text/javascript">

  • #7
    New Coder
    Join Date
    Feb 2009
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That fixed where nothing was showing, now I think I have a path issue with my images.

    Thanks,

    GJ

  • #8
    New Coder
    Join Date
    Feb 2009
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I have changed my code around and can not get the images to display, by looking at part of code can someone see if I might have code in the wrong place. Right now I am just trying to get the images to display then add in more that will have a random function on page refresh.
    Code:
    <html>
    <head><title></title>
    </head>
    <body>
    <div id="wrapper">
    <div id="logo"><img src="images/logo.gif" alt="" /></div>
    <!--
    <div id="headpanel"><img src="images/Rocks.jpg" alt="" width="160" height="106" /><img src="images/greenscene.jpg" alt="" /><img src="images/house.jpg" alt="" /><img src="images/Mountain.jpg" alt="" /></div>
    -->
    <div id="headerpanel">
    <script type="text/javascript">
    if (document.images) {
    var images = new Array();
    images[1] = new Image();
    images[2] = new Image();
    images[3] = new Image();
    images[4] = new Image();
    
    images[1].src = "images/boat.jpg";
    images[2].src = "images/desert_isle.jpg";
    images[3].src = "images/greenscene.jpg";
    images[4].src = "images/house.jpg";
    preload_image_object = new Array();
    
    for(var i = 0; i < images.length; i++){
    preload_image_object[i] = new Image();
    preload_image_object[i].src = images[i];
       
    }
    </script>
    </div>


  •  

    Posting Permissions

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