Specify loading order of JPGs?

[Chris Tomlinson]

Hi, is there any way to specify the sequence in which images load on a web
page?

More specifically, here is what we need to achieve:

Image1 starts loading first and the browser does not continue through the
HTML until Image1 has loaded COMPLETELY. When Image1 is done, Image2 BEGINS
loading. When Image2 is 100% done, only then does Image 3 begin... and so
on...

Anyone able to offer a way to do this? Some sort of browser "Pause" command
is the ideal solution, which would pause the loading of HTML until the
current command has completed, and THEN move on to the next 'chunk' of HTML.
--
Thanks,
Me

Try Google Quik-e-search™ at www.Superhighstreet.com/home
....Finds anything or they buy it for you!

 

[Spartanicus]

Hi, is there any way to specify the sequence in which images load on a web
page?

Not if those images are coded in the HTML or CSS.

More specifically, here is what we need to achieve:

Image1 starts loading first and the browser does not continue through the
HTML until Image1 has loaded COMPLETELY. When Image1 is done, Image2 BEGINS
loading. When Image2 is 100% done, only then does Image 3 begin... and so
on...

That describes your perceived solution to a problem, tell us what you
are actually trying to do and we may be able to offer useful advice.

 

[Vincent van Beveren]

There is no way to do this by setting some default browser behavour.

Every image tag has an onload handler. You can use this to start loading
the next image. For example:

<img id="img1" src="firstImage.jpg" onload="loaded(this.id);">
<img id="img2" src="empty.gif" onload="loaded(this);">
<img id="img3" src="empty.gif" onload="loaded(this);">

elsewhere:

<script type="text/javascript">

var srcs = {
img1 : 'one.jpg',
img2 : 'two.jpg',
img3 : 'three.jpg'
}

function loaded(img) {
if (img.src.indexOf('empty.gif') {
return; // ignore empty
}
nextImgId = ímg' + (parseInt(img.id) + 1);
nextImg = document.getElementById(nextImgId);
nextImg.src = srcs[nextImgId];
}

</script>

Somthing like that

Vincent

 

[Chris Tomlinson]

That describes your perceived solution to a problem, tell us what you
are actually trying to do and we may be able to offer useful advice.

We are trying to load a series of around 10 large JPGs (300K each), and want
the first one to appear as quickly as possible. The speed of the remaining
9 is not quite so important, but they should also appear in the order they
are listed.

To summarise, we want to load large images one by one, instead of the
default staggered browser behaviour.
--
Thanks,
Me

Try Google Quik-e-searchT at www.Superhighstreet.com/home
....Finds anything or they buy it for you!

 

[Spartanicus]

We are trying to load a series of around 10 large JPGs (300K each), and want
the first one to appear as quickly as possible. The speed of the remaining
9 is not quite so important, but they should also appear in the order they
are listed.

See if you have an application on your system that displays the
uncompressed size of images (most image viewers or editors will do
this). Add the values for all images displayed on that page up. Now
consider how a resource strapped device will handle that huge amount of
data. In this case a "resource strapped device" is likely to be anything
but the latest desktop computer with a huge amount of system and video
ram.

Then there is the load time, globally most internet users are still on
modem dial up. This includes many so called "developed" countries such
as for example here in Ireland. A single page with 3MB (disk size) of
images alone is going to be next to unusable for people who are not on
fast broadband connections, and slow and cumbersome for those on quite a
few home broadband packages.

So unless you have a very good reason why these images *must* be
viewable simultaneously (unlikely given the dimension alone), the
correct way to present such content is to present these images one by
one with a "Next 1 2 3 4 5 ... Previous" navigation.

 

[Brian Cryer]

Hi, is there any way to specify the sequence in which images load on a web
page?

More specifically, here is what we need to achieve:

Image1 starts loading first and the browser does not continue through the
HTML until Image1 has loaded COMPLETELY. When Image1 is done, Image2
BEGINS loading. When Image2 is 100% done, only then does Image 3 begin...
and so on...

Anyone able to offer a way to do this? Some sort of browser "Pause"
command is the ideal solution, which would pause the loading of HTML until
the current command has completed, and THEN move on to the next 'chunk' of
HTML.

I experimented with this a while back, take a look at
http://www.cryer.co.uk/resources/javascript/script3.htm.

The bottom line is that you can do it, but you have to use JavaScript. My
advice would be not to go that route unless you have a very good reason for
it.

 

[mbstevens]

So unless you have a very good reason why these images *must* be
viewable simultaneously (unlikely given the dimension alone), the
correct way to present such content is to present these images one by
one with a "Next 1 2 3 4 5 ... Previous" navigation.

And to that I would add that thumbnail/enlargement pairs could be
of help the visitor to preview and decide for herself whether
to view the larger image at all.

 

[Chris Tomlinson]

We didn't want to go into too much details in our initial post for fear of
complicating the issue, but please take a look at the page in question which
features an interactive streetscape panorama. It should then be clear why
the images need to be loaded as specified.

http://www.superhighstreet.com/George-Street-Richmond/

What you see is actually a series of JPGs sliced in divs. When we add even
larger streets it will be necessary to control the load order as previous
mentioned.

We are aware the file size is not 'ideal', but broadband is only becoming
more common so we are prepared to grow into that market, rather than
sacrifice on image quality any further than the current 40% quality setting
use.

Thanks to anyone able to offer ways to proceed along the lines of our
initial approach. We hope you appreciate we are at a stage where responses
of a negative nature such as 'don't do it' or 'why?' will not really have
any impact. We are in full steam ahead mode and getting nothing but praise
from visitors.
--
Thanks,
Me

Try Google Quik-e-searchT at www.Superhighstreet.com/home
....Finds anything or they buy it for you!

 

[Chris Tomlinson]

Thanks Vincent, we will look into this.

There is no way to do this by setting some default browser behavour.

Every image tag has an onload handler. You can use this to start loading
the next image. For example:

<img id="img1" src="firstImage.jpg" onload="loaded(this.id);">
<img id="img2" src="empty.gif" onload="loaded(this);">
<img id="img3" src="empty.gif" onload="loaded(this);">

elsewhere:

<script type="text/javascript">

var srcs = {
img1 : 'one.jpg',
img2 : 'two.jpg',
img3 : 'three.jpg'
}

function loaded(img) {
if (img.src.indexOf('empty.gif') {
return; // ignore empty
} nextImgId = ímg' + (parseInt(img.id) + 1);
nextImg = document.getElementById(nextImgId);
nextImg.src = srcs[nextImgId];
}

</script>

Somthing like that

Vincent

Hi, is there any way to specify the sequence in which images load on a
web page?

More specifically, here is what we need to achieve:

Image1 starts loading first and the browser does not continue through the
HTML until Image1 has loaded COMPLETELY. When Image1 is done, Image2
BEGINS loading. When Image2 is 100% done, only then does Image 3
begin... and so on...

Anyone able to offer a way to do this? Some sort of browser "Pause"
command is the ideal solution, which would pause the loading of HTML
until the current command has completed, and THEN move on to the next
'chunk' of HTML.

 

[Chris Tomlinson]

I experimented with this a while back, take a look at
http://www.cryer.co.uk/resources/javascript/script3.htm.

The bottom line is that you can do it, but you have to use JavaScript. My
advice would be not to go that route unless you have a very good reason
for it.

Thanks Brian, that looks interesting. Do you think it would work when the
sliced images are contained within horizontal divs? You can see how we are
using this at:
http://www.superhighstreet.com/George-Street-Richmond/
--
Thanks,
Me

Try Google Quik-e-search™ at www.Superhighstreet.com/home
....Finds anything or they buy it for you!

 

[Spartanicus]

We didn't want to go into too much details in our initial post for fear of
complicating the issue, but please take a look at the page in question which
features an interactive streetscape panorama. It should then be clear why
the images need to be loaded as specified.

http://www.superhighstreet.com/George-Street-Richmond/

What you see is actually a series of JPGs sliced in divs.

I saw no such thing, I did see a "Please click here to view this page
correctly" at the top of the page, I didn't bother clicking the link.

 

[Brian Cryer]

Thanks Brian, that looks interesting. Do you think it would work when the
sliced images are contained within horizontal divs? You can see how we
are using this at:
http://www.superhighstreet.com/George-Street-Richmond/

I looked at your page, but I'm still not quite sure I understand what you
mean by "horizontal divs". Wait a minute, do you mean that were you to take
your "highstreet view" and chop it up into a number of individual images and
then load each of those individually? If so, I don't see any reason why it
wouldn't work.

Be aware that to use JavaScript to control the load order of images means
that your visitors who don't have JavaScript enabled probably won't see
anything.

It might be worth reconsidering what you are trying to do. Currently your
"highstreet image" is 368KB, that's big, so I can understand your wanting to
do something about it. Even if you ignore the length of time it takes to
download the image, having the horizontal scroll bar is undesirable. Would
thumbnail views be better? Click the thumbnail to view the shop entrance or
enter? You could also try changing the jpg to use progressive encoding (in
my experience this can make a big difference with gif files although IE
still seems to wait until it has finished loading the jpg before displaying
it regardless of whether its progressive or not).

I know its not what you asked, but your page took a long time to load. It
might help reduce the load time if you move away from using a table to
structure the whole page (I'm not saying don't use tables for structure at
all [although there are plenty who would disagree], but try to avoid having
a table that contains everything on the form). It would be worth your while
also working through the page validation errors (http://validator.w3.org/).
(Sorry, I realise its work in progress and you would probably get to these
points once you've sorted out what to do with the big highstreet image.)

 

[mbstevens]

I saw no such thing, I did see a "Please click here to view this page
correctly" at the top of the page, I didn't bother clicking the link.

I did click around for a bit. There is a truck load of javascript trying
to do a job that could be done more clearly with straight (X)HTML and CSS,
and maybe a little server side scripting. It keeps zooming to places I
didn't intend, popping up new windows with even stranger code behind them.
There is a slide show running and controls to kill right clicks.
Unbelievably awful and unusable. "...getting nothing but praise from
our visitors." Erm, not this visitor.

Maybe if I had an afternoon to overcome the required learning curve.

I'd make it usable and accessible before worrying about order of image
load.

 

[Chris Tomlinson]

I saw no such thing, I did see a "Please click here to view this page
correctly" at the top of the page, I didn't bother clicking the link.

You must be one of the 0.01% who have disabled JavaScript for some reason.
That sort of statistic is obviously not too worrying for us, but thanks for
taking the time to tell us you didn't bother.

 

[Chris Tomlinson]

I did click around for a bit. There is a truck load of javascript trying
to do a job that could be done more clearly with straight (X)HTML and CSS,

Thanks for the feedback. What JS are you referring to? The bulk of the JS
is the Google Maps tracking, which I assure you cannot be done with HTML &
CSS.

and maybe a little server side scripting. It keeps zooming to places I
didn't intend, popping up new windows with even stranger code behind them.

Can you elaborate on where it 'zoomed' to? I assume you mean
enlarge/magnify?

What strange windows popped up? All that pops up are the web sites of the
shops you click on, which is the entire point of the site. It offers online
shopping from a real high street. If these windows are frustrating, can you
say how better to take a user to a shop's site without losing the street,
street position, etc?

There is a slide show running and controls to kill right clicks.

That's right, there is a slideshow. The idea is to bring the user to the
street, and give them the sights and sounds. Without the slideshow, they
just get a static 2D view.

We appreciate this is not what you are used to from ordinary web sites, but
nothing was ever achieved by not trying to break molds, and as I said,
broadband is only becoming more common.

Controls to kill the right clicks? One control, and it is for copyright
reasons and only on the streetscape - you can right click anywhere else.

Unbelievably awful and unusable.

Thanks for the constructive criticism. We appreciate it is hard for web
designers to see sites the same way a member of the public would.

"...getting nothing but praise from
our visitors." Erm, not this visitor.

Maybe if I had an afternoon to overcome the required learning curve.

Can we ask what you found so difficult to learn, as this will help us refine
the instructions above the street. The basic principle is 'drag the street
to walk left and right', and 'click on doors or window posters to shop
there'. We are having trouble understanding how this would need an
afternoon to learn.

I'd make it usable and accessible before worrying about order of image
load.

With your continued feedback on the above, we certainly hope to.

 

[Chris Tomlinson]

I looked at your page, but I'm still not quite sure I understand what you
mean by "horizontal divs". Wait a minute, do you mean that were you to
take your "highstreet view" and chop it up into a number of individual
images and then load each of those individually? If so, I don't see any
reason why it wouldn't work.

Hi Brian, yes that's right -- in fact that *is* what you were looking at,
but we did it so cunningly you couldn't tell. The issue is getting the
divs to load in the right order.

Be aware that to use JavaScript to control the load order of images means
that your visitors who don't have JavaScript enabled probably won't see
anything.

We are already relying on that as it's less than 1% of people now.

It might be worth reconsidering what you are trying to do. Currently your
"highstreet image" is 368KB, that's big, so I can understand your wanting
to do something about it. Even if you ignore the length of time it takes
to download the image, having the horizontal scroll bar is undesirable.
Would thumbnail views be better? Click the thumbnail to view the shop
entrance or

We appreciate your feedback, but don't you feel static thumbnails would
completely lose the virtual 'scroll' along the street that the user can do?

Broadband is only getting more common.

enter? You could also try changing the jpg to use progressive encoding (in
my experience this can make a big difference with gif files although IE
still seems to wait until it has finished loading the jpg before
displaying it regardless of whether its progressive or not).

They already use progressive which looks very good in Firefox, but we agree
IE doesn't take advantage

I know its not what you asked, but your page took a long time to load. It

Can we ask your connection speed? How long did it take to load roughly?

might help reduce the load time if you move away from using a table to
structure the whole page (I'm not saying don't use tables for structure at
all [although there are plenty who would disagree], but try to avoid
having a table that contains everything on the form). It would be worth
your while also working through the page validation errors
(http://validator.w3.org/). (Sorry, I realise its work in progress and you
would probably get to these points once you've sorted out what to do with
the big highstreet image.)

Yep, still in beta but all good points.

What would you suggest instead of the 3 tables on the page? Do these really
add a lot to the load time do you think?

 

[Alan J. Flavell]

You must be one of the 0.01% who have disabled JavaScript for some
reason. That sort of statistic is obviously not too worrying for us,

If you make up your own numbers, it's no surprise that they don't
worry you.

More realistic estimates seem to come up with figures like 10-15% and
rising (for sites that a reader has no particular reason to trust).

Even those folks who won't give up MSIE in favour of a real web
browser, are increasingly hearing about malicious web sites that will
take advantage of loppholes to do harm to their systems. They only
have to visit their "internet options"> "security" menu, to be able to
customise their settings for "the internet".

Then there's the search engine issue, though you might not be
concerned about that in the present context.

Mind you, when I search for topics that are of interest to me, I get
rather bored at being shown my own hobby pages as the top hits over
and over again, despite the fact that I made no effort to understand
the minutiae of SEO.

 

[Chris Tomlinson]

If you make up your own numbers, it's no surprise that they don't
worry you.

More realistic estimates seem to come up with figures like 10-15% and
rising (for sites that a reader has no particular reason to trust).

For every site I have run, the JS-disabled statistics of visitors have never
gone above 1%. Others also share this experience. On one site I kept
getting hits from someone without JS and it started to worry me when it
reached 1%... until I realised it was my own test hits!

Then there's the search engine issue, though you might not be
concerned about that in the present context.

Can you elaborate on which issue you mean? Cheers.

 

[mbstevens]

We appreciate this is not what you are used to from ordinary web sites, but
nothing was ever achieved by not trying to break molds,

Starry eyed DHTML experimentation was popular around 1995. When
the bold experimenters presented their wares to visitors more than a
decade ago, and visitors rejected them on all but art-experiment sites.
You're not breaking the mold, you're re-inventing the square wheel.
Spend your time learning CSS, Perl, Python, PHP, Ruby. The age of cutesy
JavaScript experiments is long gone.

and as I said,
broadband is only becoming more common.

Tell it to these broadband users:
http://www.opera.com/products/mobile/
How usable is your site on _those_ devices?

Controls to kill the right clicks? One control, and it is for copyright
reasons and only on the streetscape - you can right click anywhere else.

As a matter of fact I already have all the images
and they are sitting in my browser's cache. Didn't have to do a thing
to get it there except visit the site. And it will be there until I
decide to clear my cache. You haven't protected anything, just irritated
visitors.

 

[Alan J. Flavell]

For every site I have run, the JS-disabled statistics of visitors
have never gone above 1%.

Make more of your pages dependent on JS, and you'll be able to
get that statistic even smaller. Does that tell you something?

Can you elaborate on which issue you mean?

Search engine indexers generally don't run JS. So any content that's
only accessible by means of JS won't be considered for indexing.

OTOH there's millions of pages (depending on exactly how I set the
search term) which are indexed for haranguing the indexing robot that
its browser doesn't support javascript. I wouldn't want to waste my
search engine credits on that sort of administrivia.

JS has its proper place, for optional extras, I'm not saying it
shouldn't be used: what I /am/ saying is that in general it's a
mistake to make a page or site dependent on it. The last time I
checked a JS FAQ, it said pretty much the same thing.