Saturday, 14 May 2016

Preloading your Website Images–done right!

Couldn’t resist the full screen background image, could you? I can’t blame you – the average person has an HD camera in their pocket – HD imagery as wallpaper has become the norm – and that norm makes waiting for those bandwidth abusing image file sizes to load crap on the user experience when opening your website.

 

To avoid the awkward preload do this:

First, compress the shit out of those pictures. (I won’t talk about that here)

Then, preload them:

The CSS

<style>
html { /* background cover image */
	background: url(images/backgroundpicture.png) no-repeat center center fixed; 
	-webkit-background-size: cover; 
	-moz-background-size: cover; 
	-o-background-size: cover; 
	background-size: cover; 
	posistion: relative; 
	min-height: 100%; 
}
body { display: none; }
</style>

The Javascript

<script>$(function() { /* JQuery */
	
	var src = $('html').css('background-image');
	var url = src.match(/\((.*?)\)/)[1].replace(/('|")/g,'');
	var img = new Image();
	img.onload = function() { //Image Loaded:
		$('body').fadeIn(); //Fade everything in
	}
	img.src = url; 
	if (img.complete) img.onload();
});</script>

 

 

I welcome comments or suggestions… This is merely the approach I have been using most successfully, with the myriad of options out there – I can’t help notice how many fail hard.

This one, so far, done me well.

Twitter

Page Hits