SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: Preload images

  1. #1
    SitePoint Zealot allanon's Avatar
    Join Date
    Jan 2005
    Location
    United States
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Preload images

    Hi, can I use JS to preload images used later on the nav? So when a user uses it, it doesn't have to download the image, just take it from the cache?
    - Monster!

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Michigan
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry to threadjack, but maybe this preload solution will work for you: http://wellstyled.com/css-nopreload-rollovers.html

    It uses one single image for all the rollovers. You can see an example at http://www.websidestory.com (take a look at their navigation image: http://www.websidestory.com/public/a.../navmatrix.gif)

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just did this for someone else (modifying his code)

    It includes a preload function

    the css above is fine but making special images may not be your thing


    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    </
    head>

    <
    body onload="imagePreloader();" >
    <
    script language="JavaScript" type="text/javascript">
    <!--
    var 
    photoDir "http://vicsjavascripts.org.uk/StdImages/"// Location of photos for gallery

    var photoArray = new Array()
    // Source, Width, Height
    photoArray[0]=["One.gif""600""200"];
    photoArray[1]=["Two.gif""600""200"];
    photoArray[2]=["Three.gif""600""200"];
    photoArray[3]=["Four.gif""600""200"];

    myimages=new Array();

    function 
    imagePreloader() {
     for (var 
    i=0;i<photoArray.length;i++){
     
    // width-height images
     
    myimages[i] = new Image();
     
    myimages[i].array=new Array();
     
    myimages[i].onload=function(){ this.array[0]=this.srcthis.array[1]=this.widththis.array[2]=this.heightResult(this) }
     
    myimages[i].src photoDir photoArray[i][0];
     }
    }



    var 
    ResultAry=new Array();
    var 
    HTML='';

    function 
    Result(obj){
       
    ResultAry[ResultAry.length]=obj.array;
       
    HTML+=obj.array[0];
       
    HTML+='  width = '+obj.array[1];
       
    HTML+=' height = '+obj.array[2]+'\n\n';
      
    document.getElementById('fred').value=HTML+'\n\nResultAry('+ResultAry+')';
    }

    //-->
    </script>
    How do I extract the width, height, source

    like this ie photoArray[i][1] etc...


    And if using DOM createElement and getElementbyId

    How to reformulate this into a preloader

    <textarea id="fred" wrap="off" rows="15" cols="100"></textarea>

    </body>

    </html> 
    BTW the text box records the actual image sizes

    also mayas well post this as it may be of interest

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    <
    script language="JavaScript" type="text/javascript">
    <!--
    var 
    ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    var 
    ImgAry=new Array('One.gif','Two.gif');
    var 
    SRCAry=new Array();

    for (
    i=0;i<ImgAry.length;i++){
     
    SRCAry[i]=new Image();
     
    SRCAry[i].src=ImgPath+ImgAry[i];
    }

    function 
    Swap(obj,img){
     
    obj.out=obj.src;
     
    obj.src=img;
     
    obj.onmouseout=function(){ this.src=obj.out; }
    }

    function 
    Swap2(obj){
     
    obj.getElementsByTagName('IMG')[1].style.visibility='hidden';
     
    obj.style.color='white';
     
    obj.onmouseout=function(){
                     
    obj.getElementsByTagName('IMG')[1].style.visibility='visible';
                     
    obj.style.color='black';
                    }
    }

    //-->
    </script>

    </head>

    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="50"
    onmouseover="javascript:Swap(this,SRCAry[1].src);"
    >

    <div style="position:relative;overflow:hidden;width:100px;height:50px;" onmouseover="javascript:Swap2(this);" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="100" height="50"
    style="position:absolute;top:0px;left:0px;">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="50"
    style="position:absolute;top:0px;left:0px;">
    <div style="position:relative;width:100px;height:50px;top:15px;left:15px;" >
    Title
    </div>

    </div>

    <body>

    </body>

    </html> 

  4. #4
    SitePoint Guru augathra's Avatar
    Join Date
    Jul 2004
    Location
    united states
    Posts
    826
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, it worked - thanks.

    BTW this wasn't for a roll over.
    Also, I guess I could have used DW to create this code for me, lol!

    Thanks again

  5. #5
    SitePoint Guru augathra's Avatar
    Join Date
    Jul 2004
    Location
    united states
    Posts
    826
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BTW - this is Dreamweavers preloader:

    Code:
    <script language="JavaScript" type="text/javascript">
    <!--
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    //-->
    </script>
    then onload="MM_preloadImages('images/one.gif','images/two.gif');"

  6. #6
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An alternate method for preloading is give the image or its container a visibility:hidden style rule.

  7. #7
    SitePoint Guru augathra's Avatar
    Join Date
    Jul 2004
    Location
    united states
    Posts
    826
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was originally going to do that, but I figured it would hurt SEO.

  8. #8
    SitePoint Guru
    Join Date
    Feb 2005
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Question: Does document.createElement('img') do the exact same thing as new Image()? Does it work with precaching as well?

  9. #9
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    document.createElement() creates a new HTML element, which then can be attached to the document tree, as part of the HTML markup. new Image() creates an image object which JavaScript can manipulate, but does not create a new element as part of the HTML document.

    In my experience, using hidden elements, such as divs or images, does not appear to affect page ranking.

  10. #10
    SitePoint Guru
    Join Date
    Feb 2005
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So far in my experience, document.createElement('img') and new Image() are interchangable. An image created via new Image also has all the properties and methods of a DOM HTMLImage object, including cloneNode(). Is there truly any difference between them?

  11. #11
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    createElement is usually used prior to an appendChild, or similar, action. Have you tried appendChild with an image created through new Image()? I haven't, but I suspect it will need the element first.

  12. #12
    SitePoint Guru
    Join Date
    Feb 2005
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes it works:

    PHP Code:
    var img1 = new Image();
    img1.src 'image/ftv2folderopen.gif';
    var 
    img2 document.createElement('img');
    img2.src 'image/ftv2folderclosed.gif'

    window.onload = function() {
        
    document.body.appendChild(img1);
        
    document.body.appendChild(img2);
        
    document.body.appendChild(img1.cloneNode(false));
        
    document.body.appendChild(img2.cloneNode(false));
        
    document.body.appendChild(img1.cloneNode(false));
        
    document.body.appendChild(img2.cloneNode(false));

    Appends and renders all 6 images correctly.

  13. #13
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, it does make sense that there would only, really be one kind of image object. The implementation of that object in JavaScript predates the W3C's DOM. Hence, I believe that new Image simply reflects a JavaScript-only syntax, while the createElement syntax is the DOM's. Both doubtless invoke the same object creation methods in the browser.


Bookmarks

Posting Permissions

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