Showing the low res image while real image loads

Discussion in 'JavaScript' started by enchance, Sep 4, 2008.

  1. #1
    I have a lowres gif image which I want to show while the bigger one is still loading. Do any of you know how to show this lowres image while the larger one is still loading? Then once the larger image has been fully loaded, it immediately replaces the lowres one.

    Optional: If the larger image could fade-in using JQuery or Mootols or some other framework then that'd be great! I got my lowres gif from here www.ajaxload.info
     
    enchance, Sep 4, 2008 IP
  2. xlcho

    xlcho Guest

    Messages:
    532
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #2
    That's pretty simple, you don't need AJAX and stuff.. Here's something I wrote in a minute:
    <script type='text/javascript'>
    function showBig()
    {
    	document.getElementById('smallimg').parentNode.removeChild(document.getElementById('smallimg')); //remove the small image from the page
    	document.getElementById('bigimg').style.display = 'block'; //and show the big image
    }
    </script>
    <img id='smallimg' src="small.jpg">
    <img id='bigimg' src="big.jpg" style='display: none;' onload='showBig();'>
    Code (markup):
    Asuming you have a small.jpg and big.jpg files in the same directory as your html flie, this will load the small one when the page loads, and when the big one has finished loading, it will remove the small from the page and show the big one instead.
    You can still use a fader or something like that, if you want to make it more interesting :)
     
    xlcho, Sep 4, 2008 IP
  3. enchance

    enchance Peon

    Messages:
    109
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Asuming you have a small.jpg and big.jpg files in the same directory as your html flie, this will load the small one when the page loads, and when the big one has finished loading, it will remove the small from the page and show the big one instead.
    You can still use a fader or something like that, if you want to make it more interesting :)[/QUOTE]

    Wow! This is great! I'm such a noob. What fader do you suggest I use?

    Actually, where do you add the fader here? Hehe
     
    enchance, Sep 5, 2008 IP
  4. temp2

    temp2 Well-Known Member

    Messages:
    1,231
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    150
    Digital Goods:
    2
    #4
    temp2, Sep 5, 2008 IP
  5. enchance

    enchance Peon

    Messages:
    109
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    enchance, Sep 7, 2008 IP