Change image after 1 second

Discussion in 'HTML & Website Design' started by jasonsc, May 8, 2014.

0
  1. #1
    I want to display loading.gif on a webpage for 1 second and than change it to another .gif that will be displayed on page permanently.

    While loading.gif is displayed, I don't actually want to pre-load the main.gif, I want it to start loading for the user when it is actually displayed.

    Any ideas how to do that?

    Thanks
     
    jasonsc, May 8, 2014 IP
  2. Clone UI

    Clone UI Member

    Messages:
    11
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    35
    Digital Goods:
    10
    #2
    https://www.google.com/search?q=settimeout
     
    Clone UI, May 8, 2014 IP
  3. nishantghodke9

    nishantghodke9 Member

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #3
    This question is supposed to be in HTML or Javascript. Anyways, Here's a quick fix : (Make sure you have jQuery file in your head section.)

    1. Place this HTML code wherever you want the display the image.

    <div id="imgChange"><img src="URL_TO_LOADING.GIF"/></div>

    2. Place this piece of script in the head section.

    <script type="text/javascript">
    $(document).ready(function() {
    $('#imgChange').setTimeout(function() {
    $(this).html('<img src="URL_TO_MAIN.GIF"/>')}, 1200); //Adjust the seconds. 1000 Units = 1 second.
    });
    });
    </script>
     
    nishantghodke9, May 11, 2014 IP
  4. Jigney

    Jigney Active Member

    Messages:
    168
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    93
    #4
    You want to change the ".gif" every second, It means that you have more than one ".gif" files

    So you can use my code it's very easy to use, Just change the images array with your ".gif" image.

    Here i use setInterval method of jQuery....

    You can set time interval as you want...
    CODE :

    <script src="http://code.jquery.com/jquery-1.11.0.min.js" <http://code.jquery.com/jquery-1.11.0.min.js> ></script> <script type="text/javascript"> $( document ).ready(function() {swap_image();})
    function swap_image(){
    var images = ['image1.gif', 'image2.gif', 'image3.gif', 'image4.gif'];
    var i = 0;
    setInterval(function () {
    $('.demo img').prop('src',images);i++;
    if(i>images.length){swap_image();}
    },4000);
    }
    </script>
    <div class="demo"><img src="image1.gif"></div>
     
    Jigney, May 13, 2014 IP