Grow your CSS skills. Land your dream job.

Jquery preload images

  • # March 21, 2013 at 8:17 pm

    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

    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.

    # March 22, 2013 at 9:24 am

    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;
    });

    # March 22, 2013 at 6:56 pm

    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..
    });

    # March 23, 2013 at 2:57 pm

    Thank you.
    Great forum.

    # June 14, 2013 at 3:56 pm

    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?

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".