Preloading images using CSS
#preload {
display: none;
}
<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.
add_action( 'wp_footer', 'sk_preload_images' );
function sk_preload_images() {
if ( ! is_front_page() ) {
return;
} ?>
<div id="preload">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/home-section-4-bkgrd-hover.jpg" width="1" height="1" alt="Image 01" />
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/home-section-5-bkgrd-hover.jpg" width="1" height="1" alt="Image 02" />
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/home-section-6-bkgrd-hover.jpg" width="1" height="1" alt="Image 03" />
</div>
<?php }