So I'm building a website that will use a lot of animated GIF's on mouse hover. There will be a lot of images, and I only want to load the images that will be used on any given page. It's using WordPress so I can use the conditional tags to only put out the URL's of the images I need on a certain page.

My problem was how to tell the browser/server which images needed to be preloaded. I decided to add a HTML5 data attribute to the containing element.

For example, I would have a DIV with this PHP in it:

```
<div id="home-container" class="preload" data-preload="<?php echo preloadImages(); ?>"></div>

```

Which would call this function in PHP:

```
function preloadImages() {
    global $post;
    $templateURL = get_template_directory_uri();
    $images = array();

    if( is_page('test') )
        $images[] = "'".$templateURL."/images/gifs-static/button-info-tab-close-off.gif'";
        $images[] = "'".$templateURL."/images/gifs-animated/button-info-tab-close.gif'";
    }

    return implode(", ", $images);
}

```

So the output would be this:

```
<div id="home-container" class="preload" data-preload="'http://example.com/images/gifs-static/button-info-tab-close-off.gif', 'http://example.com/images/gifs-animated/button-info-tab-close.gif'"></div>

```

And then I run this JavaScript:

```
jQuery('.preload').each(function(){

        var images = [
            // Comma separated list
            jQuery(this).data('preload')
        ];

        jQuery(images).each(function() {
            jQuery('<img />').attr('src', this).addClass('preloaded').appendTo('body').hide();
        });
});

```

The problem is that the JavaScript does not like the comma separated list. If I just write in the URLs, it works fine. So is there a better way to pass in those URLs? Or a better way in general?