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 13 of 13
  1. #1
    New Coder
    Join Date
    Apr 2008
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Don't display an image until is completely downloaded

    In my site when you add a very large image to a post and then you see that post, the image downloads in its actual size and then resizes to the size I allow.

    I've noticed in a website that large images aren't displayed until they load completely. So if the image is huge you don't see a thing until it is completely downloaded.

    Is this possible to accomplish with javascript?

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Pre-load the image, then display it.

  • #3
    New Coder
    Join Date
    Aug 2008
    Location
    Colfax, California USA
    Posts
    64
    Thanks
    3
    Thanked 5 Times in 5 Posts
    you could have the style set to none and onload have the display set to block

    display being a css property.

  • #4
    Banned
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    display Image after Pre-load the image

  • #5
    New Coder
    Join Date
    Apr 2008
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rhinodog8 View Post
    you could have the style set to none and onload have the display set to block

    display being a css property.
    do I have to specify image sources this way?
    Because images are supposed to be uploaded randomly by the community.

  • #6
    Banned
    Join Date
    May 2005
    Location
    Midwest, U.S.
    Posts
    118
    Thanks
    1
    Thanked 26 Times in 23 Posts
    I'd avoid the problem altogether. Don't use JavaScript to re-size images. Use your server language. If your host supports PHP, then post an appropriate question in that forum. PHP has some excellent image manipulation functions that will maintain the aspect ratio, color density, etc. You can manipulate the image as soon as it's uploaded. You can create a temporary page, for your use only, to re-size all existing images. This way, all images load in a reasonable amount of time.

  • #7
    New Coder
    Join Date
    Apr 2008
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Ok I understand. Uploaded images shouldn't be a problem this way.
    What can I do about images posted through bb code?

  • #8
    Banned
    Join Date
    May 2005
    Location
    Midwest, U.S.
    Posts
    118
    Thanks
    1
    Thanked 26 Times in 23 Posts
    You've posted twice now, and still can't bring yourself to write "thank you" in response to ANYONE who took the time to help you. I'm finished.

  • Users who have thanked Cranford for this post:

    Philip M (08-30-2008)

  • #9
    New Coder
    Join Date
    Aug 2008
    Location
    Colfax, California USA
    Posts
    64
    Thanks
    3
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by joshua7 View Post
    do I have to specify image sources this way?
    Because images are supposed to be uploaded randomly by the community.
    No it would be a css class that would be automatically applied to any uploaded image.
    Last edited by rhinodog8; 08-28-2008 at 09:56 AM.

  • Users who have thanked rhinodog8 for this post:

    joshua7 (08-28-2008)

  • #10
    New Coder
    Join Date
    Apr 2008
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I should change the class when the page loads right?
    Something like:

    Code:
    <body onload="document.getElementById(  ).className = 'showimages';">
    
    .showimages img {
    display: inline;
    }

  • #11
    New Coder
    Join Date
    Aug 2008
    Location
    Colfax, California USA
    Posts
    64
    Thanks
    3
    Thanked 5 Times in 5 Posts
    yea, expect you'd use:
    Code:
    onload="getElementByClass('imgclass').style = 'display: block'"
    and i don't know for sure but I think you can use onload to images, and just have you server/php/forum/whatever have it insert that code in posts and inbetween <img></img> tags.

    and have the img class be(in CSS)
    Code:
    .imgclass {display:none;}
    Last edited by rhinodog8; 08-28-2008 at 10:20 AM.

  • #12
    New Coder
    Join Date
    Aug 2008
    Location
    Colfax, California USA
    Posts
    64
    Thanks
    3
    Thanked 5 Times in 5 Posts
    Sorry, duplicate post, can't seem to delete it.
    Last edited by rhinodog8; 08-28-2008 at 10:10 AM.

  • #13
    New Coder
    Join Date
    Apr 2008
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    ok thanks so much rhinodog8!


  •  

    Posting Permissions

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