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
I have the same question. Is there an answer anywhere?
This is all I get.
ReferenceError: Can’t find variable: $
Thanks Chris,
This is really helpful it’s exactly what I was looking for.
Rob.
Thanks for the post. For folks that use your site as the quintessential reference for all things HTML/CSS, perhaps you could revisit this post to include support for cached images in Internet Explorer as well as sequential loading. A proper jQuery plugin architecture would also be really great.
Thanks again for all your work/insight.
-jase
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.