Jquery preload images

[bastunqk]

Hi.
I wrote very simple jquery script that changes the img src, but now i have glich because i didn’t preload the images.My question is how to preload images using jquery.
Here is my code.

jQuery.noConflict();
/*Change images src on hover*/
jQuery(document).ready(function($) {

/*1*/
$('.bnt1Program a').hover (
function () {
$('img#programHeaderBnt1').fadeOut(300, function() {
$('img#programHeaderBnt1').attr("src", "/wp-content/upl/images/logo.png");
$('img#programHeaderBnt1').fadeIn(300);
})
},
function () {
$('img#programHeaderBnt1').fadeOut(300, function() {
$('img#programHeaderBnt1').attr("src", "/wp-content/upl/images/logo1.png");
$('img#programHeaderBnt1').fadeIn(300);
})
}
);
/*2*/
$('.bnt2Program a').hover (
function () {
$('img#programHeaderBnt2').fadeOut(300, function() {
$('img#programHeaderBnt2').attr("src", "/wp-content/upl/images/logo2.png");
$('img#programHeaderBnt2').fadeIn(300);
})
},
function () {
$('img#programHeaderBnt2').fadeOut(300, function() {
$('img#programHeaderBnt2').attr("src", "/wp-content/upl/images/logo3.png");
$('img#programHeaderBnt2').fadeIn(300);
})
}
);

/*W*/
$('.bntWProgram a').hover (
function () {
$('img#programHeaderBntW').fadeOut(300, function() {
$('img#programHeaderBntW').attr("src", "/wp-content/upl/images/logo4.png");
$('img#programHeaderBntW').fadeIn(300);
})
},
function () {
$('img#programHeaderBntW').fadeOut(300, function() {
$('img#programHeaderBntW').attr("src", "/wp-content/upl/images/logo5.png");
$('img#programHeaderBntW').fadeIn(300);
})
}
);

});

Thank you.
Regards.


[Podders]

Add the following code to your documen.ready,

var preloads = [
‘/wp-content/upl/images/logo.png’,
‘/wp-content/upl/images/logo2.png’,
‘/wp-content/upl/images/logo4.png’
];

$(preloads).each(function(){
$(‘‘)[0].src = this;
});

You just continue to add image paths to the array to preload them.

[Alen]

More info here: http://stackoverflow.com/questions/476679/preloading-images-with-jquery

[bastunqk]

Thank you.
Should i use it on some other way, or just to put this in top ? I don’t understand the logic of this.
Or i must use preloads[0] or 1 etc… in my code path to image ?

Podders
Permalink to comment # 2:29AM
Flag
Add the following code to your documen.ready,

var preloads = [
'/wp-content/upl/images/logo.png',
'/wp-content/upl/images/logo2.png',
'/wp-content/upl/images/logo4.png'
];

$(preloads).each(function(){
$('')[0].src = this;
});

[Podders]

Put the code inside your document ready function

$(document).ready(function(){
var preloads = [
‘/wp-content/upl/images/logo.png’,
‘/wp-content/upl/images/logo2.png’,
‘/wp-content/upl/images/logo4.png’
];

$(preloads).each(function(){
$(‘‘)[0].src = this;
});

//rest of your code here..
});

[bastunqk]

Thank you.
Great forum.

[ldurfee]

Podders, that worked like a charm for me. It works fine in Chrome and in IE, but in FireFox I get this error “Image corrupt or truncated:”

Do you have any ideas?

[Author]

Posts