Do YOU love JS as much as I do?

I'm always hailing Javascript as the supreme language to handle just about all your website needs. Trust me though, Javascript can be somewhat of a beast. Wouldn't it be great to tame that beast and breed creations without a whim of effort? I discovered many years back and have since used a great API for Javascript that requires very little effort in making such wonderful web applications. It's called jQuery. First off I wanted to introduce jQuery with a great snippet of code that I use commonly among my websites. I think with any great introduction, it could spark a bit of light on the immediate and practical uses of the library.

$(function(){
    // this will empty the body of the page and append the text below :)
    $('body').empty().append('YOU LOVE jQUERY');
});

Here we go. So, the story goes like this. I needed a great way to load a massive amount of images on a product listing page for a website that I had built. The product listing had almost 40 items. So having every single item image load (even as small as they were) took a terrible amount of time. However, I noticed once the browser cache picked them up, page for page, seemed to be fine. It was just the immediate load that was so horrible. jQuery to the rescue. I managed to find a practical way to preload these images during multiple page loads (even PRIOR to clicking on the product listing).

Here's how it works.
jQuery has the ability to extend it's object which is absolutely cool. Obviously, jQuery is an OOP library. So, anytime I can get a chance to extend an object and add my own methods, it's definitely worthwhile. Well I figured out that jQuery can create DOM elements silently (behind the scenes) with a one line snippet of code. You can basically create any DOM element available to the browser. See the snippet below..

$(function)() {
    jQuery("<img>");
}

So now that I know I can make IMG elements silently in the DOM, I figured it wouldn't be that hard to cycle through my entire image collection and create the elements as needed. I just needed a collection to work with. My image names for the product listing was numeric so it was a pretty simple tactic. The location to each image was constant as well, so that helped a ton. So I knew if I created a Javascript array of image locations I can spring all those images into the DOM and into the browser cache leaving the load time very low on the product listing page. I just needed a loop and an array of data. The great thing about PHP5 is that it has the ability to do a method called json_encode(). This method (especially when used on an array) will spit out a JSON representation of a given value. JSON in Javascript looks like an array which is great. This gives me my data. So I can use PHP to echo the JSON representation into my Javascript giving me my data array.

So for proof of concept, here is a PHP representation of my strategy...

PHP Code:

	
<?php

foreach($products as $product) {

    $imageCollectionArr[] = "/img/products/large/{$product['id']}.jpg";

}

$myJSONData = json_encode($imageCollectionArr);

?>



<script type="text/javascript">

$(function() {

    // JSON Array

    var data = <?=$myJSONData?>;



    // extend jQuery

    // make $.preloadImages()

    jQuery.extend({preloadImages: function() {

        for(var i = 0; i<arguments[0].length; i++)

        {

            // this will make the source for each IMG element the argument arrays value

            // the JSON array will be a key value array. the key being an index

            // the value is the image source

            jQuery("<img>").attr("src", arguments[0][i]);

        }

    }});



    // now you can run this method any time

    $.preloadImages(data);

}

</script>

Simple as that. Please feel free to comment/question.

Your smart guy of sorts,
Anthony

Looks good and a nice read i will look into this a bit more when i have time.

Umm.... Whoah...

Tony... yet again I'm impressed by your ability to not only understand, but use such codes.