The Random Image on the “Loading” Screen

The “Loading” Screen or “Preloader” image that appears briefly before each page on this site has loaded, comes from implementing a few different methods (and from different coding thinkers). Here, I’ll show you a little about how the one used in the Eminence theme works…

OK, so here are the images I’m using right now as a group of animated graphics (GIFs) to be picked from when each page starts to load, which I want to be chosen at random:

The code that we use here to choose AND THEN produce the URL of each GIF is written for , and when the function displayRandomPreloaderPhoto() is called for, the URL for the image will be given.

/* displayRandomPreloaderPhoto()
 * Function to return the URL of photo, picked randomly, for the preloader.
 * This code has been changed to fit it's purpose with this theme,
 * and the original coding was adopted from 'user1822824' at stackExchange
*/

function displayRandomPreloaderPhoto() {

$imageURL1 = 'http://powerdesignco.com/wp-content/uploads/2017/02/cat-ready-to-pounce-240px.gif';
$imageURL2 = 'http://powerdesignco.com/wp-content/uploads/2017/02/diesel-240px.gif';
$imageURL3 = 'http://powerdesignco.com/wp-content/uploads/2017/02/downhill-skateboarder-240px.gif';
$imageURL4 = 'http://powerdesignco.com/wp-content/uploads/2017/02/espresso-pouring-240px.gif';
$imageURL5 = 'http://powerdesignco.com/wp-content/uploads/2017/02/oh-joy-240px.gif';
$imageURL6 = 'http://powerdesignco.com/wp-content/uploads/2017/02/sunset-waves-240px.gif';
$imageURL7 = 'http://powerdesignco.com/wp-content/uploads/2017/02/plant-leaves-window-zoomed-Square-cinemagraph.gif';

    $photoAreas = array($imageURL1, $imageURL2, $imageURL3, $imageURL4, $imageURL5, $imageURL6, $imageURL7);

    $randomNumber = rand(0, (count($photoAreas) - 1));

    $randomPhotoURL = $photoAreas[$randomNumber];

    echo $randomPhotoURL;
}

At this point, the location of the randomly chosen GIF has been chosen and the only thing left to do is display it within the theme’s HTML and we’re all set! Every time a page is loaded, the Loading 😉 screen that appears before the page called for is displayed will now show one of the GIFs from the list shown below, referred to in the markup as $imageURL1, $imageURL2, $imageURL3, $imageURL4, $imageURL5, $imageURL6 and $imageURL7.

The function returns an output of the URL of the image that is picked at random, so to display it within a web page with HTML and PHP, you would use: <img src="<?php displayRandomPreloaderPhoto(); ?>" >

That’s it!

Go ahead, refresh the page and see for yourself!