until image loads

JavaScript and client side scripting.

Moderator: General Moderators

malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

until image loads

Post by malcolmboston »

im currently creating an image gallery and instead of blank placeholders in place until the image loads.

something like

UntilImageLoads
{
// do this
}
WhenLoaded
{
// display pic
}

if it could be done in PHP i could do it, but ive never learnt javascript due to my belief in finding different ways of doing stuff with it
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post by malcolmboston »

no-one knows how to do this?
timvw
DevNet Master
Posts: 4897
Joined: Mon Jan 19, 2004 11:11 pm
Location: Leuven, Belgium

Post by timvw »

although i don't like allt hat client-side stuff...

http://london-net.net/javascript/image_ ... s_bar.html gives you an example :)
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post by malcolmboston »

too overblown for my needs to be honest, ill explain better what i want

we all know that before an image is actually show on the browser, a placeholder is put in place to facilitate the loaded image later.

What i require is that a very simple image is there instead of it being blank, i dont need no fancy loading bars etc

Thank you for your suggestion though
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post by malcolmboston »

no-one has any ideas?
User avatar
phpScott
DevNet Resident
Posts: 1206
Joined: Wed Oct 09, 2002 6:51 pm
Location: Keele, U.K.

Post by phpScott »

you can always use iframes.

one hidden frame to change the picture to what ever you want as the 'holding picture' then submit the Iframe when it reloads with the finished 'new picture' it changes the source of the img tag on the main page.

Can help this weekend if you need more, as I have to do something very similar for a probably very similar personal project
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post by malcolmboston »

well im building an "Localhost Project Manager" it features image gallery, calendar, diary, RSS feeds, code library etc

i would MUCH prefer not too go down the route of iframes tbh, theres gotta be a simpler way
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post by malcolmboston »

last bump :?

anyone got any ideas then?

i was tihnking applying an css background-image to the tD that the image resides in, and then when the image loads it would go over it and in turn "mask" it.

this is way too hacky tbh, has anyone got any ideas?
User avatar
phpScott
DevNet Resident
Posts: 1206
Joined: Wed Oct 09, 2002 6:51 pm
Location: Keele, U.K.

Post by phpScott »

last thing I can think of at the moment is using js and innerHTML to rewrite the img src.

I can only assume you wil be using something like ob_flush to load the page while waiting for the image to load, finish rendering or what ever is happening to it? but how to change the image src after completion after the rendering is beyond me at the moment.

If you come up with something good please post it.
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post by malcolmboston »

ill explain the situation some more,

its for part of an image gallery, i do not use any ob_start stuff but the images are generated through an image gallery app i have written, however many of the albums have a few hundred images which i have not employed pagination as its purely my application and i dont want to use it.

because of this, images can take upward of 10 seconds to display as the browser loads the images into its placeholder, obviously because of this, the image shifts the rest of the design around a little which isnt a problem, i would just like to provide a nice "loading" sign untril it is loaded
The Monkey
Forum Contributor
Posts: 168
Joined: Tue Mar 09, 2004 9:05 am
Location: Arkansas, USA

Post by The Monkey »

Ah! If all you are worried about is the way the design is shifted around, could you not put the height / width attributes into your img tags?

Of course, this assumes that all of the images are the same, but I thought I'd throw that out there...
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post by malcolmboston »

malcolmboston wrote:....obviously because of this, the image shifts the rest of the design around a little which isnt a problem,
the images are held within a TD, because the image is generated through PHP to output a thumbnail i can only specify max heights and width, not the actual value, therefore the table shifts around but only maybe 1 or 2 px so it isnt a problem, as i said before, i just want a "sexy" way of showing a loading sign until the image is loaded into its placeholder
User avatar
phpScott
DevNet Resident
Posts: 1206
Joined: Wed Oct 09, 2002 6:51 pm
Location: Keele, U.K.

Post by phpScott »

sorry, misunderstood what you where trying to achieve or what the page was going to be doing, didn't realize it was that fact there where lots of images loading on a page.

same still stands if you come up with a nice solution let me know please.

Thanks

phpScott
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post by malcolmboston »

isnt there just a simple event in javascript for the img element such as:

Code: Select all

// in body
<body OnLoad - show images in place (loading image)
// on img element
<OnLoad - display pic>
obviously that wont work but there must be a way
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post by malcolmboston »

bumpeh^^
Post Reply