Home › Forums › JavaScript › Jquery preload images
- This topic is empty.
-
AuthorPosts
-
March 21, 2013 at 8:17 pm #43571bastunqkParticipant
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.
March 21, 2013 at 8:29 pm #129289PoddersParticipantAdd 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.
March 21, 2013 at 10:02 pm #129292AlenParticipantMarch 22, 2013 at 9:24 am #129349bastunqkParticipantThank 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;
});March 22, 2013 at 6:56 pm #129408PoddersParticipantPut 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..
});March 23, 2013 at 2:57 pm #129450bastunqkParticipantThank you.
Great forum.June 14, 2013 at 3:56 pm #138735ldurfeeMemberPodders, 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?
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.