Preloader for a WordPress Site

You will want to put the code in the child theme, otherwise an update to the parent theme will erase it.

You want the loader to be a part of the page as the document is first loaded by the browser, then use javascript to detect when the images are finished loading and remove the loader.

Check out these resources that have more information specifically on the structure of the HTML and javascript

https://css-tricks.com/snippets/jquery/display-loading-graphic-until-page-fully-loaded/

https://stackoverflow.com/questions/11072759/display-a-loading-bar-before-the-entire-page-is-loaded

http://smallenvelop.com/display-loading-icon-page-loads-completely/