Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question image load before display

    One of my webpages is composed of a imageready export of images for my layout. I don't like how the page loads one segment at a time. It looks cheap and trashy. Is there any way I can script the page so all the images load and display at once?

  • #2
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you want, you can use the body onLoad event to call a function after the page's HTML is finished loading. For example, if you wanted all of the page's images to display at the same time, you might consider this:

    First off, you should make the images invisible, so that they won't show until they are finished loading. You can do that easily using CSS.

    Code:
    .hidden { display: none; }
    What you would have to do then is assign the "hidden" class to all of the images that you want to appear after the body is finished loading.

    Code:
    <img src="http://domain.com/path/image.type" alt="" class="hidden" />
    This will cause all of your images to begin as unseeable: they will be loaded onto the page, but their progress will not be noticeable, since they have no display. That way, you can use and onLoad function to display all of the pictures simultaneously, once they're all done loading.

    Next, you can add the function that will display the images to the Body tag's OnLoad event:

    Code:
    <body onLoad="showimages()">
    And the last thing that is needed is the function itself (within the header of the document would be best).

    Code:
    <script type="text/javascript" langage="JavaScript">
    function showimages()
     {
     for (a=0;a<document.images.length;a++)
      {
      document.images[a].style.display = 'inline'
      }
     }
    </script>
    Hope that helps somewhat.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    hmm

    Unfortunently the <BODY>/window onload event occurs irrespective of image load status.

    There is an image obj onload event but that appears more of an image found and has started to load event.

    There is also an image object .complete method which works fine with IE but unfound images in other browsers return true

    I will wait for other comments on this post before making any suggestions on a solution.

  • #4
    Regular Coder
    Join Date
    Oct 2005
    Location
    Arizona
    Posts
    336
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips
    hmm

    Unfortunently the <BODY>/window onload event occurs irrespective of image load status.

    There is an image obj onload event but that appears more of an image found and has started to load event.

    There is also an image object .complete method which works fine with IE but unfound images in other browsers return true

    I will wait for other comments on this post before making any suggestions on a solution.
    Hi vwphillips,

    I know we have talked about the image object.onload and .complete before. I was wondering if we could use both. First the image object.onload to make sure the image is found and then image object.complete after the found image has downloaded. But this still does not take care of the situation when the image is not found. I think it is up to the website developer to make sure the images are where they are suppose to be. The only thing I can think is to create an error message for display when this happens. Telling the user that image "by name" could not be found. Maybe even ask the user to inform the webmaster of the error.

    What do you think?

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    yes we could but I'm waiting for more comment, also I I have a script for replacing missing images
    Last edited by vwphillips; 12-23-2005 at 11:57 PM.


  •  

    Posting Permissions

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