Picture management

[altreed]

Hi,

Has anoyone ever tried to create an asp page that displays images that
either displays them as a slideshow or on a long webpage?

I have an html page that displays my pictures, but as there are many of
them which are large and my bandwidth is restricted I want to download
them and display them one at a time. Currently it the client tries to
download them all at the same time, or four at a time. This slows down
the downloads to an unbearable rate.

Is there a component that allows you detect when an image has been
downloaded and then allow a trigger to start downloading the next one?

Any Ideas?

Thanks
Dave

 

[Evertjan.]

altreed wrote on 06 nov 2006 in microsoft.public.inetserver.asp.general:

Has anoyone ever tried to create an asp page that displays images that
either displays them as a slideshow or on a long webpage?

I have an html page that displays my pictures, but as there are many of
them which are large and my bandwidth is restricted I want to download
them and display them one at a time. Currently it the client tries to
download them all at the same time, or four at a time. This slows down
the downloads to an unbearable rate.

Is there a component that allows you detect when an image has been
downloaded and then allow a trigger to start downloading the next one?

You will have to do this clientside, a server is only serving and is not
trigger happy.

 

[Anthony Jones]

Hi,

Has anoyone ever tried to create an asp page that displays images that
either displays them as a slideshow or on a long webpage?

I have an html page that displays my pictures, but as there are many of
them which are large and my bandwidth is restricted I want to download
them and display them one at a time. Currently it the client tries to
download them all at the same time, or four at a time. This slows down
the downloads to an unbearable rate.

Is there a component that allows you detect when an image has been
downloaded and then allow a trigger to start downloading the next one?

Any Ideas?

Do it clientside in Javascript (warning air code):-

<script type="text/javascript">

function imgDone()
{
var img = this.nextSibling
var src = img ? img.getAttribute("altsrc") : null
if (src)
{
img.onload = imgDone
img.src = img.altsrc
}
}
</script>
<img src="/folder/image1.jpg" onload="imgDone.call(this)" />
<img altsrc="/folder/image2.jpg" src="spacer.gif" />
..
..
..
<img altsrc="/folder/imageN.jpg" src="spacer.gif" />

Now the load of each img invokes the loading of the next until they are all
done. Hence only one image will be downloading at a time.

 

[Dave Anderson]

You will have to do this clientside, a server is only serving
and is not trigger happy.

A server can certainly be configured to simultaneously service a limited
number of requests per session. Sadly, IIS seems to lack this feature, even
in the metabase.

 

[Anthony Jones]

A server can certainly be configured to simultaneously service a limited
number of requests per session. Sadly, IIS seems to lack this feature, even
in the metabase.

Assuming it could what would it use to distinguish one session from another?

 

[altreed]

Thanks for the advice, I understand the approach.

I tried the code below, not really understanding it (never looked at
java). I find that it doesn't work.

I am being very cheeky, but could you break it down. I am getting
placeholders with an x in it.

Thanks
Dave

 

[Anthony Jones]

Thanks for the advice, I understand the approach.

I tried the code below, not really understanding it (never looked at
java). I find that it doesn't work.

I am being very cheeky, but could you break it down. I am getting
placeholders with an x in it.

Spacer.gif is a common name for a gif containing a single transparent pixel.
You should be able to download one from somewhere if you haven't got one
already.

There is a bug in the code I posted the top of the imgDone function should
look like this:-

var img = this.nextSibling
if (img.nodeType == 3) img = img.nextSibling // this line was missing
var src = img ? img.getAttribute("altsrc") : null

Thanks
Dave

// When image has finished loading it calls this function
function imgDone()
{

// Retrieve an the next image node in the document after the one that just
loaded
var img = this.nextSibling
// skip any interveaning #text node
if (img.nodeType == 3) img = img.nextSibling // this line was missing

// The true src url for the image was stored as an extra attribute on the
img tag.
// If the calling img is the last one then the img variable will now be
null

var src = img ? img.getAttribute("altsrc") : null

if (src)
{
//make this function the target of the img onload event
img.onload = imgDone
// setting the src property will cause the next image to download
img.src = img.altsrc
// when the img has finished this function is called again until all
images are loaded
}
}
</script>
<!-- The first img has it's src set correctly and onload event to call the
imgDone function -->
<img src="/folder/image1.jpg" onload="imgDone.call(this)" />
<!-- all subsequent imgs will specify spacer.gif as the original src and the
real url on a altrc attribute -->
<img altsrc="/folder/image2.jpg" src="spacer.gif" />
..
..
..

 

[altreed]

Thanks Anthony,

I created a simple page using only images and this script works fine.
However, I need to include text on the page also. I find that if I add
a <br> 'Break' in the text the images wont load after the first image.

Is there a way to overcome this issue? I really need to include text
with the images. I dont know any other way to achieve <br> can
Javascript provide a solution?

Thanks again.
Dave

 

[Anthony Jones]

Thanks Anthony,

I created a simple page using only images and this script works fine.
However, I need to include text on the page also. I find that if I add
a <br> 'Break' in the text the images wont load after the first image.

Is there a way to overcome this issue? I really need to include text
with the images. I dont know any other way to achieve <br> can
Javascript provide a solution?

Thanks again.
Dave

Try this adjustment:-

<script type="text/javascript">

function imgDone()
{
var img = this.nextSibling
while (img && (img.tagName != 'IMG' || img.getAttribute("altsrc") ==
null))
img = img.nextSibling

if (img)
{
img.onload = imgDone
img.src = img.getAttribute("altsrc")
}
}
</script>

It will hunt through the document from the first img to the end of the
document ignoring any nodes in between img tags.

 

[altreed]

Thanks Anthony, you are a top geezer. That code works a treat.

If anyone wants to load images on a webpage sequentially this is
definately the code for you.

Many thanks
Dave