Preload: Images only loading-in on first visit
Hi,
I'm working on a portfolio site for a friend at the moment. Each page contains quite a lot of images which fade in as they load in. To make sure the effect is seen, I set the images to pre-load before the fade-in effect happens. I have a problem with this though. Some images are not appearing when I click 'back' to a previously visited part of the site.
Here's the URL:
http://www.sleepymeuk.dreamhosters.com/noid/nhs.html
If you click on another section, say 'Bacardi' for example and then click back, the logo in the top left and the icons on the left do not appear. I presume this is because the images are already in the browser's cache.
The code I used for the preload and fade-in is:
-
<script type="text/javascript">
$(document).ready(function() {
$('.fadein').hide()
.load(function () {
$(this).fadeIn("slow");
})
.attr('src', 'img/noidlogo.png', 'img/facebook.png', 'img/twitter.png', 'img/linkedin.png', 'img/behance.png');
});
</script>
I'm a real newbie to jQuery, so I'd really appreciate any help to be in really simple terms. I'm keen to get my head around this, slowly but surely.
Thanks!
Adam