until image loads
Moderator: General Moderators
-
malcolmboston
- DevNet Resident
- Posts: 1826
- Joined: Tue Nov 18, 2003 1:09 pm
- Location: Middlesbrough, UK
until image loads
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
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
although i don't like allt hat client-side stuff...
http://london-net.net/javascript/image_ ... s_bar.html gives you an example
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
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
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
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
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
-
malcolmboston
- DevNet Resident
- Posts: 1826
- Joined: Tue Nov 18, 2003 1:09 pm
- Location: Middlesbrough, UK
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.
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
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
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
-
malcolmboston
- DevNet Resident
- Posts: 1826
- Joined: Tue Nov 18, 2003 1:09 pm
- Location: Middlesbrough, UK
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 placeholdermalcolmboston wrote:....obviously because of this, the image shifts the rest of the design around a little which isnt a problem,
-
malcolmboston
- DevNet Resident
- Posts: 1826
- Joined: Tue Nov 18, 2003 1:09 pm
- Location: Middlesbrough, UK
isnt there just a simple event in javascript for the img element such as:
obviously that wont work but there must be a way
Code: Select all
// in body
<body OnLoad - show images in place (loading image)
// on img element
<OnLoad - display pic>-
malcolmboston
- DevNet Resident
- Posts: 1826
- Joined: Tue Nov 18, 2003 1:09 pm
- Location: Middlesbrough, UK