Better WP Performance: Preloading Images With CSS

I have been creating a lot of image and photo rich wordpress websites lately and using jQuery to display galleries and rotating photo shows.

These sites are really awesome but, the galleries can take a long time to load and the overall visitor effect can be disappointing.

After a bit of searching I found that it is possible to preload images on a site using CSS.  Thanks to Perishable Press for the inspiration.

On Perishable Press, I found the instructions to add this code to the bottom of an xHTML page:

<div id="preload"><img src="http://domain.tld/image-01.png" alt="Image 01" width="1" height="1">

<img src="http://domain.tld/image-02.png" alt="Image 02" width="1" height="1" />

<img src="http://domain.tld/image-03.png" alt="Image 03" width="1" height="1" /></div>

and add this to CSS file:

div#preload { display: none; }

This was great, but trying to implement this on a dynamic website like WordPress kind of defeats the purpose – I want a dynamic image loader!

So I worked through how to use this functionality on my WordPress websites.

Whilst the images on the initial load of the first page on the site may still take time to display, the rest of pages and image displays are much, much better.

I’m still working on improving the load times, but I thought I would share the code that I use so far:

To preload ALL the images on a site on first page load

Add this to your themes style.css file:

div#preload { display: none; }

Create the following function in your themes functions.php file:

function twpw_imagepreload() {
$args3=array(
'post_status'=>'publish'
);
$imageloader= null;
$imageloader = new WP_Query();
$imageloader->query($args3);
$imagepreload.='<div id="preload">';
if ($imageloader->have_posts()) : while ($imageloader->have_posts()) : $imageloader->the_post();
$parentid=get_the_ID();
$args1=array(
'post_type'=>'attachment',
'post_parent' => $parentid,
'post_mime_type' => 'image'
);
$image_query = get_children($args1);
foreach ( $image_query as $attachment_id => $attachment ) {
$image3=wp_get_attachment_image_src($attachment_id);
$imagepreload.='<img src="'.$image3[0].'" width="1" height="1"/>';
}
endwhile; endif;
$imagepreload.='</div>';
return $imagepreload;
}

add the following line to your themes footer.php, just able the tag:

<?php echo twpw_imagepreload() ?> 

Stepping through the function:

The first section of the function returns an array of ALL published posts on your WordPress Website to a variable called $imageloader:

$args3=array(
'post_status'=>'publish'
);
$imageloader= null;
$imageloader = new WP_Query();
$imageloader->query($args3);

This part of the function uses the query_post functionality of WordPress.

This line creates the start of the html div into which the images will be preloaded:

$imagepreload.='<div id="preload">';

This part checks if there are published posts, and begins to step through each published post.

if ($imageloader->have_posts()) : while ($imageloader->have_posts()) : $imageloader->the_post();
$parentid=get_the_ID();

This line:

$parentid=get_the_ID();

returns the ID of the post being used in the loop and is critical to the next part of the function.

Now we have the ID of the post, we need to retrieve all the images attached to that post.  We achieve this using the get_children() function with the assistance of query_posts. get_children returns an array, which we store in the variable $image_query:

$args1=array(
'post_type'=>'attachment',
'post_parent' => $parentid,
'post_mime_type' => 'image'
);
$image_query = get_children($args1);

Now, we create the code to load the images into our preload div, using a foreach loop on $image_query:

foreach ( $image_query as $attachment_id => $attachment ) {
$image3=wp_get_attachment_image_src($attachment_id);
$imagepreload.='<img src="'.$image3[0].'" width="1" height="1"/>';
}

Using wp_get_attachment_image_src, we can retrieve the details of each image into an array ($image3).

Then we create the html code to display the image in our preload div.

As we loop through $image_query, the variable $imagepreload is appended with the next image.

The final part of the function closes off the loops and returns the variable $imagepreload.

endwhile; endif;
$imagepreload.='</div>';
return $imagepreload;

That’s it really – I’m sure it can be done better, but this is what I’ve come up with.

I’m also not certain what effect this function will have on the SEO of the site – truly image rich sites will increase the load time of the site (it shouldn’t affect the display of the first page, but it will cause the final load of the page to be much longer).

Love to have your feedback on this code and whether you have a better way of doing it.