Code Snippet
Image Preloader
Very easy way to preload images which are needed later (e.g. when a hover is performed)
<script type="text/javascript">
$.preloadImages = function()
{
for(var i = 0; i<arguments.length; i++)
{
$("<img />").attr("src", arguments[i]);
}
}
$(document).ready(function()
{
$.preloadImages("hoverimage1.jpg","hoverimage2.jpg");
});
</script>
Chris–this library is awesome–both in content and organization!
Thank you, thank you, thank you!
Thanks so much chris, just what I needed. Finally got round to implementing it today. Check out the linked site to see how I used it. My first full project, so a lot is wrong, but I’ve learned a lot and more recent projects have been much better because of it.
Theres a case for jQuery here, but no need to attach preloadImages to the $ namespace. Semantically I feel it should be left it as it’s own function.
What do I do if I want to preload images that are in a folder. For example on my site I have all my images in a folder called images and the images I want to preload in a folder called nav. How do I target these ?
Do I simply do the following ?
$.preloadImages("images/nav/1.jpg","images/nav/2.jpg")Thanks,
Micky
Thanks Chris,
This is really helpful it’s exactly what I was looking for.
Rob.
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.