How to show Preloading icon before completely loading a image

Discussion in 'jQuery' started by imsaaz, Dec 6, 2010.

0
  1. #1
    I created a simple jquery slideshow with the help of this tutorial> http://www.hacktweaks.com/2010/09/worlds-smallest-jquery-slideshow.html

    However I wanted to add some tweaks to it.

    Before the images are fully loaded, I want to show a rotating GIF icon.

    The very basic code i tried goes like this,
    /* this cycles the number from 1 to 3.
    /* according to HackTweaks m is the total number of slides*/
    var m = 3;
    x += 1;
    if (x > m) {
    x = 1;
    }

    /* This fades out currently loaded div */
    $("DIV.slide:nth-child(n)").fadeOut(function(){
    $("DIV.slide:nth-child(n)").removeClass("active")});

    /* in the next line, i did something like this to hide the image before and remove loading class and add active class and finally fadein the image.
    $("DIV.slide:nth-child(" + (x) + ") img").load(function() {
    $(this).hide();
    $("DIV.slide:nth-child(" + (x) + ")").removeClass('loading').addClass('active');
    $("DIV.slide:nth-child(" + (x) + ") img").fadeIn();
    });

    but it's not working...

    Can any body help?
     
    imsaaz, Dec 6, 2010 IP
  2. imsaaz

    imsaaz Peon

    Messages:
    20
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    hmm.... Can any body answer?
     
    imsaaz, Dec 6, 2010 IP
  3. hardik_dan

    hardik_dan Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    google jquery Preload and you will find plugin you can use to achieve what you want with lots of different options.
     
    hardik_dan, Dec 9, 2010 IP
  4. GNi33

    GNi33 Peon

    Messages:
    16
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I don't think that you need a plugin to achieve that.

    All I do on my pages is that I add a div that contains the loading-gif when I start to load an image.
    So when the .load-function finishes, I have a little callback - function that removes this "loading-div" again. Simple as that
     
    GNi33, Dec 12, 2010 IP