Discussion on:

Preloading and the JavaScript Image() object: onLoad() event handler

There is another way to preload image without JavaScript. It will be by CSS.



This will make the image is available before calling it.

The only problem with the CSS approach suggested is that it leaves blank spaces where the images would have been.

An improvement is to use style="display:none"
which leaves no blank spaces

"An image leaving blanks" is something that you should be able to take care of easily with CSS, as well as the size and position of the element (we won't show it right away).

Now, the standard actually *recommends* UA (user agents) not to download content with display:none ?there are alternatives.

This is wrong:

objImage.<nLoad=imagesLoaded();

it should be

objImage.<nload=imagesLoaded();

Javascript has the gloriously annoying feature of requiring <nload to be completely lowercase.

At least in Chrome it does.

WHICH IS WHY I SPENT TEN MINUTES WONDERING WHY THIS ARTICLE DOESN'T WORK.

Please fix. Thanks.

Your solution could work with a slight alteration. Try this:

.a {
background: transparent none left top no-repeat;
position: absolute;
visibility: hidden;
}

good explanation.

Looks good, but doesn't work with multiple images, at least not in IE 7 or Firefox 2.0.0.6 -- in both it just preloads the last image from the array.

Loading two pages just to load images is going to actually be slower than just loading one with images in it. Also if the server or browser is not configured to force image caching, there is a good chance the images will have to be reloaded when the second page loads anyway. Images load at a speed determined by filesize and bandwidth. JavaScript is not going to increase this.

the code in listing A as a 'search' property?? what is it never seen this?
if (str.search(clickImages[num-1]) == -1)

Hi
can anyone help me out to get the preloader script like using here inthis website
http://www.redflystudios.com/portfolio/web-design/ when i click on thumbnail the way of larger image is oppening, I want this complete script for some usages. I have tried hard but didn't get any where.

Can anyone help me out to get this script please write me at aps_158@yahoo.com


Thanks
abhijeet Singh

Pre-loading an image does NOT speed things up at all. It only gives the illusion of being faster and not a very good one at that. It does not matter if the images are loaded before the rest of the page. The key is that they are still being loaded. The only thing that this does is makes it so that the images used for hovers show up the first time being hovered over as apposed to showing blank for a moment. You speak of this first load of the images as a bad thing but in using this method you sacrifice the most important load time and that is the very first time the user opens your page. They have to wait longer than they would have had you just left well enough alone. Talk about counter productive.

is there anyway to preload images and assign their item number automatically based on the set number (max) images to upload?

I wrote a preloader awhile ago that works across all browsers. You can check it out here.

http://blog.152.org/2008_01_01_archive.html

i think:

objImage.onLoad = imagesLoaded();

should be

objImage.onLoad = imagesLoaded;

and it should come after the function definition.

In your first example where you wrote :

onMouseOver="javascript:document.img01.src='heavyimagefile.jpg'"

Did you mean :

onMouseOver="javascript:document.img01.src=heavyimage"?

If not, then I'm confused.

Is it possible to preload a whole (joomla) website?

I've created a faster, parallel version: http://blog.lieldulev.com/2010/05/21/parallel-image-preloading-in-js/

Very confusing. "preLoader"function has never been called.
In the "event handler" routine, imagesLoaded() function is undefined.

The most confusing part is that perhaps you like to see these images being rolled over.
How do you cycle thru them? by setTimout() function, by clicking, etc.

Hi, I have built a jquery plugin to do this for you. As you will see from the demos on my site, it definately works:
demos: http://staticvoid.info/imageLoader/
jquery homepage: http://plugins.jquery.com/project/ImagePreloader
The syntax is really simple as well. Please feel free to use it.

Most of the suggestions in this thread are in regards to preloading images for a menu or rollover effect.

Can the same be used for large background images? Images that do not have a rollover effect.

Thanks
Tim

You can easily create rollover effect with styles using a single image that contains all different versions of the button/image. Just modify the offset of the image, that way once page has loaded all rollovers will work as they should.

Here is the style definition:

a.rollover {
display:block;
width: 200px;
height: 50px;
background:url('rollover.png') no-repeat;
}
a.rollover:hover {
background-position: 0 -50px;
}

a.rollover:active {
background-position: 0 -100px;
}


And then use the rollover this way in html (how to put html code in here?):

a class="rollover" href="http://your.url" /a

Naturally, this doesn't work for dynamic content or larger images. Just handy for many rollover cases, especially buttons.

can you tell me what this code is calling for?
<script type="text/javascript" src="../../../GeneratedItems/CSScriptLib.js"></script>
<script type="text/javascript">
<!--
var preloadFlag = false;
function preloadImages() {
if (document.images) {
pre_main_over = newImage('../../navigation/main-over.gif');
pre_pre20s_over = newImage('../../navigation/pre20s-over.gif');
pre__20s_30s_over = newImage('../../navigation/20s-30s-over.gif');
pre__40s_50s_over = newImage('../../navigation/40s-50s-over.gif');
pre__60s_70s_over = newImage('../../navigation/60s-70s-over.gif');
pre_movies_over = newImage('../../navigation/movies-over.gif');
pre_burlesque_over = newImage('../../navigation/burlesque-over.gif');
pre_stars_over = newImage('../../navigation/stars-over.gif');
pre_magazines_over = newImage('../../navigation/magazines-over.gif');
pre_illustrations_over = newImage('../../navigation/illustrations-over.gif');
pre_native_over = newImage('../../navigation/native-over.gif');
pre_funnies_over = newImage('../../navigation/funnies-over.gif');
pre_contact_over = newImage('../../navigation/contact-over.gif');
pre_faq_over = newImage('../../navigation/faq-over.gif');
preloadFlag = true;
}
}
CSAct[/*CMP*/ 'C2E46675742'] = new Array(CSGotoLink,/*URL*/ '../../index.html','');
CSAct[/*CMP*/ 'C2E46675743'] = new Array(CSGotoLink,/*URL*/ '../../pre1920/pre20index.html','');
CSAct[/*CMP*/ 'C2E46675744'] = new Array(CSGotoLink,/*URL*/ '../../1920-1930/20sindex.html','');
CSAct[/*CMP*/ 'C2E46675745'] = new Array(CSGotoLink,/*URL*/ '../../1940-1950/40sindex.html','');
CSAct[/*CMP*/ 'C2E46675746'] = new Array(CSGotoLink,/*URL*/ '../../1960-1970/60sindex.html','');
CSAct[/*CMP*/ 'C2E46675747'] = new Array(CSGotoLink,/*URL*/ '../../movies/moviesindex.html','');
CSAct[/*CMP*/ 'C2E46675748'] = new Array(CSGotoLink,/*URL*/ '../../burlesque/Burlesqueindex.html','');
CSAct[/*CMP*/ 'C2E46675749'] = new Array(CSGotoLink,/*URL*/ '../starsindex.html','');
CSAct[/*CMP*/ 'C2E46675750'] = new Array(CSGotoLink,/*URL*/ '../../Magazines/Magazines.html','');
CSAct[/*CMP*/ 'C2E46675751'] = new Array(CSGotoLink,/*URL*/ '../../Illustrations/illustrationsindex.html','');
CSAct[/*CMP*/ 'C2E46675752'] = new Array(CSGotoLink,/*URL*/ '../../natives/nativesindex.html','');
CSAct[/*CMP*/ 'C2E46675753'] = new Array(CSGotoLink,/*URL*/ '../../funnies.html','');
CSAct[/*CMP*/ 'C2E46675754'] = new Array(CSGotoLink,/*URL*/ '../../ContactVintageTaboo.html','');
CSAct[/*CMP*/ 'C2E46675755'] = new Array(CSGotoLink,/*URL*/ '../../FAQs.html','');
// -->
</script>

How do you run an array to display a series of images?

I had to create a new image object to allow the image to actually load before it gets overwritten in the loop.

http://pastie.org/1978053

var preload = function(){
var imgObjs = [],
imgs = [
'http://example.com/image1.png',
'http://example.com/image2.png',
'http://example.com/image3.png'
],
len = imgs.length;

for ( var i=0; ilen; i++ ) {
//create a new Image object to get consistent caching
//otherwise the re-used image object get replaced before image
//has a chance to load
imgObjs.push(new Image());
imgObjs.src = imgs;
}
}();

//automatically gets executed when code is loaded

Excellent post and wonderful blog, I really like this type of interesting articles keep it up.
Plasterboard Fixings

hi,

i am facing image cache issue when opening new window in html(only on IE 6,7,8).i am using two html pages with back next button, In that html page i have preloaded the image using javascript function.here the main image taking some time at first time because file size, once its loaded then whenever i navigate by back next button, the image appeared very quickly. but when i open external popup from that existing page and then click next or back button, the image "again reloading" like new.

please any one give me exact cache solution for above. below here i given online version and zip version. to get clear loading please check on slow connection.




http://elearning.aptaracorp.com/C2Technologies/ImageLoading_Issue/cache_issue_IE6,7,8/page1.html



http://elearning.aptaracorp.com/C2Technologies/ImageLoading_Issue