Very easy way to preload images which are needed later (e.g. when a hover is performed)
$.preloadImages = function() {
for (var i = 0; i < arguments.length; i++) {
$("<img />").attr("src", arguments[i]);
}
}
$.preloadImages("hoverimage1.jpg","hoverimage2.jpg");
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: $
That is exactly what you need to do.
However, if the path to all image files is one and the same, you’d better include it into the function rather than writing it for each image in the argument list. The same applies for the file name extension. So you may end up only with
$.preloadImages("1,2");
When all images are in the same folder simply:
$("").attr("src", "images/nav/".arguments[i]);
Lance: if you’re programming in JavaScript for the Web, and you don’t know what ‘$’ is, ask yourself if you shouldn’t maybe pick up a book on front-end Web development for beginners. ‘$’ is provided by jQuery — an extremely ubiquitous library. Hopefully you’ve learned that in the 3 years since your post.
Way to stroke that epeen QS. Stroke it, stroke it real good.
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
I think you want to check if(document.image) and then create images by “new Image(imageSourceName)”. Also look at http://docs.jquery.com/Plugins/Authoring …anyways, cool blog!
So simple! I love it! Thank you :) :) :)
I am getting a browser javascript error in MSIE that says, “‘$’ is undefined” on the 2nd line of the code:
Am I missing something?
Include jQuery…
does this also work for background images?
how would i change the script to pre-load bg images please.
thank you
@tim, it works exactly the same way for background images. You just need to put the image link in the list of images being preloaded:
$.preloadImages(“hoverimage1.jpg”,”hoverimage2.jpg”,”backgroundimage1.png”,”backgroundimage2.png”);
This is just what I needed!
A good case can be made that preloading everything in one quick loop is not always the best option:
http://www.photo-mark.com/notes/image-preloading/
The suggestion to use simpler function version when all images are in the same folder (by ‘Knows Everything’ as of #NOVEMBER 26, 2014) works – but with ‘+’ instead of ‘.’ – like this:
How about the url(”); what is the script for this ? can you help me thanks :)
Simple and functional! Thank you! =)