Don't display an image until is completely downloaded

joshua7 · 08-27-2008, 07:47 AM

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?

Philip M · 08-27-2008, 08:05 AM

Pre-load the image, then display it.

rhinodog8 · 08-27-2008, 08:44 AM

you could have the style set to none and onload have the display set to block

display being a css property.

lipsigprice · 08-27-2008, 01:40 PM

display Image after Pre-load the image

joshua7 · 08-27-2008, 05:41 PM

Quote:

Originally Posted by rhinodog8

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.

Cranford · 08-27-2008, 06:18 PM

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.

joshua7 · 08-27-2008, 08:27 PM

Ok I understand. Uploaded images shouldn't be a problem this way.
What can I do about images posted through bb code?

Cranford · 08-27-2008, 08:37 PM

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.

rhinodog8 · 08-27-2008, 08:44 PM

Quote:

Originally Posted by joshua7

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.

joshua7 · 08-28-2008, 08:52 AM

I should change the class when the page loads right?
Something like:

Code:

<body onload="document.getElementById(  ).className = 'showimages';">

.showimages img {
display: inline;
}

rhinodog8 · 08-28-2008, 10:02 AM

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;}

rhinodog8 · 08-28-2008, 10:03 AM

Sorry, duplicate post, can't seem to delete it.

joshua7 · 08-28-2008, 05:23 PM

ok thanks so much rhinodog8!