Advanced Search

Page 1 of 3 123 LastLast
Results 1 to 10 of 24

Thread: onload image

  1. #1
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    797
    Thanks
    86
    Thanked 2 Times in 2 Posts

    Default onload image

    Hey all,
    I have a site that takes about ten seconds to load, so I'd like to display an image or text while the page is loading, but then the image or text need to disppear when the content is loaded. How can that be done ?
    The site is http://www.hetbestevoordeel.be

  2. #2
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    797
    Thanks
    86
    Thanked 2 Times in 2 Posts

    Default

    Can anyone help me please. Now it takes so long to load the page that, as there is no message that tells them to hold on, visitors think the site is not online anymore.
    I am losing money, please help !

  3. #3
    Join Date
    Jun 2007
    Posts
    543
    Thanks
    3
    Thanked 78 Times in 78 Posts
    Blog Entries
    1

    Default

    look at an ajax loader. i believe there is one in dynamic drive. you could modify ajax tabs content script. you could get a loading icon from here
    [Jasme Library (Javascript Motion Effects)] My Site
    /\/\@ /\/\@|{
    There are 10 kinds of people in the world, those that understand binary and those that don't.

  4. The Following User Says Thank You to Master_script_maker For This Useful Post:

    chechu (03-05-2008)

  5. #4
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    797
    Thanks
    86
    Thanked 2 Times in 2 Posts

    Default

    I got the loading icon, but what script do I have to place, so the icon comes up when opening the site and disappears when the content appears ? Thanks !

  6. #5
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    797
    Thanks
    86
    Thanked 2 Times in 2 Posts

    Default

    As you said I should be looking for an ajax loader, I found this:
    http://javascript.internet.com/ajax/ajax-loader.html
    but honestly, I do not understand what to do with it.
    Can anyone help me out, please ?

  7. #6
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    797
    Thanks
    86
    Thanked 2 Times in 2 Posts

    Default

    Code exploiter suggests this site: http://developer.yahoo.com/yui/examp...l-loading.html
    How can this be implemented to my site problem ?

  8. #7
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    797
    Thanks
    86
    Thanked 2 Times in 2 Posts

    Default

    Anyone, please ?

  9. #8
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    797
    Thanks
    86
    Thanked 2 Times in 2 Posts

    Default

    getting desperate ...

  10. #9
    Join Date
    Dec 2007
    Location
    Ankara, Turkey
    Posts
    160
    Thanks
    2
    Thanked 2 Times in 2 Posts

    Default

    You can create and put an overlay div which indicates that the page is loading and place a function to the body element's onload which removes this div.

    body.onload is fired when the page is completely downloaded, including the images.

    I think this is waht you are asking for?

  11. #10
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    Ehh?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <style type="text/css">
    #loading{
    position: absolute;
    top: 5px;
    right: 1px;
    color: #FFF;
    background: #417EAF;
    font-family: arial;
    padding: 3px;
    }
    </style>
    </head>
    <body onload="document.getElementById('loading').style.display = 'none';document.getElementById('content').style.display = 'inline';">
    
    <div id="loading">Loading...</div>
    <div id='content' style='display:none;'>
    <img src="http://www.dynamicdrive.com/forums/image.php?u=11077&dateline=1168681090" />
    </div>
    </body>
    </html>
    Jeremy | jfein.net

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •