I have checked a few other forums and can't get it to work. On the website there are three images with a hover effect. On the first page load the hover effect takes a second to load the background image.
Here is what I have inbetween my
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>then I have this in my body tag:
<body <?php body_class(); ?> onLoad="MM_preloadImages('http://agconcretepro.com/wp-content/uploads/2016/07/designreplace2.png','http://agconcretepro.com/wp-content/uploads/2016/07/ConcreteREPLACE.png','http://agconcretepro.com/wp-content/uploads/2016/07/no_title_paver.png')">Doesn't work for the three images I need preloaded. I also copy and pasted this from google searching, and tried putting it in various places in my header.php to no avail.
<script type="text/javascript">
if (document.images) {
img1 = new Image();
img2 = new Image();
img3 = new Image();
img1.src = "http://agconcretepro.com/wp-content/uploads/2016/07/designreplace2.png";
img2.src = "http://agconcretepro.com/wp-content/uploads/2016/07/ConcreteREPLACE.png";
img3.src = "http://agconcretepro.com/wp-content/uploads/2016/07/no_title_paver.png";
}
</script>Any help here would be awesome! Thank you!
</div>
Try something like this:
<body imageURL1="path/to/your/image1" imageURL2="path/to/your/image2" imageURL3="path/to/your/image3" imageURL4="path/to/your/image4">
<div id="home-image-container"></div>
Then using jQuery you can do:
function home_load_background(){
//Load first image and start timer
var $body = $('body');
var $fader = $('#home-image-container');
var $temp = $('<div />');
var images = [];
images.push(
$body.attr('imageurl1'),
$body.attr('imageurl2'),
$body.attr('imageurl3'),
$body.attr('imageurl4')
);
for (var i = 0; i < images.length; i++) {
var $img = $('<img />').attr('src', images[i]);
$temp.append($img);
};
$fader
.append($temp.find('img'))
.find('img').first().on('load', function(){
$fader.fsslider({
width: $fader.width(),
height: $fader.height(),
spw: 5,
sph: 4,
delay: 8000,
sDelay: 100,
effect: 'rand',
texture: 'strip1',
navigation: false,
animDuration: 1200,
});
});
}
And on document ready you can call your function:
$(document).ready(function(){
home_load_background();
});
Has you can see i used FSSlider to show the other images. However, you can use whatever you want.
I answered the question myself without any JS which works out well.
With HTML, right after the body tag:
<div id="preload">
<img src="path/to/image>
<img src="path/to/image>
<img src="path/to/image>
</div>
and CSS:
div#preload{display: none}
For anybody if they come across this problem! And