Preloading Images JavaScript

Hello folks...

Want to know how to load an image before the user sees it?

Then read on.

We all hate moments like these online:

src

Here is the free code bit today:


<div class="hidden">
        <script type="text/javascript">
<!--//--><![CDATA[//><!--
        var images = new Array()
            function preload() {
                for (i = 0; i < preload.arguments.length; i++) {
                    images[i] = new Image()
                    images[i].src = preload.arguments[i]
                }
            }
            preload(
"http://www.navsounds.com/blogimages/button200x200of.gif",
)
            //--><!]]>
        </script>
    </div>


The code above is all about preloading your images. For those who don't know what that means or what it can do for you and your blog. Preloading images is exactly what it sounds like. When you write the code above into an HTML page or blog layout the browser looks at it and finds this spot:

            preload(
"http://www.navsounds.com/blogimages/button200x200of.gif"
)
Then it loads that image into a hidden area on the page so that the user doesn't see it until they are supposed to.

Drives you nuts doesn't it?



We all hate waiting for site data to download or for content to change on a page. Preloading images can help alleviate that problem by downloading the images into the users cache before they are needed.
I use this exact script to get my fancy blog button loaded so that when the user mouses over the button it can display the fancy, but large GIF file immediately.

The blog button that you see without interaction is a very small file, but to have the animation that I have when you mouse over my button it required having a 1.1MB GIF picture.

If I hadn't preloaded the GIF the user would have to wait anywhere from a couple of seconds to a minute depending on the their connection speed just to see my cool animation. (As you may have had to with this example.)
The preloading of my blog button saves the user from waiting so that when they hover over my button it is ready to play and works immediately.


You can utilize to this code on your blog or site to produce a similar result. If you have multiple pages on your blog for example and one of them contains a lot of pictures you could use this script to preload those images so that the user doesn't have to wait to see them when they navigate to your "pictures" page. Or if you are utilizing mouse over images it can help the image to be ready the instant the user mouses over.


Simply replace the contents of the quotes with the source location of the image you want to preload:

            preload(
"Where your image is"
)
If you have multiple images that you want to load do this:

  preload(
"Where your image is" ,
                                "Where your second image is",
                                "Etc."
)
Then take all of the code and put it inside an HTML/JavaScript widget.

<div class="hidden">
        <script type="text/javascript">
<!--//--><![CDATA[//><!--
        var images = new Array()
            function preload() {
                for (i = 0; i < preload.arguments.length; i++) {
                    images[i] = new Image()
                    images[i].src = preload.arguments[i]
                }
            }
             preload(


"WHERE YOUR IMAGE IS" ,
                                "WHERE YOUR 2ND IMAGE IS",
                                "ETC."


)
            //--><!]]>
        </script>
    </div>



Enjoy!
As always post any comments or questions...