By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,537 Members | 1,743 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,537 IT Pros & Developers. It's quick & easy.

Specify loading order of JPGs?

P: n/a
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!
Jul 6 '06 #1
Share this Question
Share on Google+
27 Replies


P: n/a
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 wrote:
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.
Jul 6 '06 #2

P: n/a
"Chris Tomlinson" <an**@anon.comwrote in message
news:G4******************@text.news.blueyonder.co. uk...
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.
--
Brian Cryer
www.cryer.co.uk/brian

Jul 6 '06 #3

P: n/a
Thanks Vincent, we will look into this.

"Vincent van Beveren" <vv*********@xiam.nlwrote in message
news:44***********************@news.kpnplanet.nl.. .
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 wrote:
>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.

Jul 6 '06 #4

P: n/a
"Brian Cryer" <br*********@127.0.0.1.ntlworld.comwrote in message
news:oJ********************@pipex.net...
"Chris Tomlinson" <an**@anon.comwrote in message
news:G4******************@text.news.blueyonder.co. uk...
>Hi, is there any way to specify the sequence in which images load on a
web page?

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!
Jul 6 '06 #5

P: n/a
"Chris Tomlinson" <an**@anon.comwrote in message
news:Or******************@text.news.blueyonder.co. uk...
"Brian Cryer" <br*********@127.0.0.1.ntlworld.comwrote in message
news:oJ********************@pipex.net...
>"Chris Tomlinson" <an**@anon.comwrote in message
news:G4******************@text.news.blueyonder.co .uk...
>>Hi, is there any way to specify the sequence in which images load on a
web page?

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/
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.)
--
Brian Cryer
www.cryer.co.uk/brian
Jul 6 '06 #6

P: n/a
"Brian Cryer" <br*********@127.0.0.1.ntlworld.comwrote in message
news:Uo********************@pipex.net...
>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.
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?
--
Thanks,
Me
Jul 6 '06 #7

P: n/a
PS: Oh dear, we just realised that if we put the images into JS as per your
demo page, they probably won't appear in WYSIWYG view in web page editors,
correct? Unfortunately these are essential tools due to the imagemaps we
need to draw around all the doors and shop signs, so the JPGs must be
visible in programs such as FrontPage, Dreamweaver, etc. Do you have any
other ideas to control the loading of slices?
Jul 6 '06 #8

P: n/a
You could maybe use the NOSCRIPT tag for that?

<NOSCRIPT>
.. plain and simple HTML with maps ...
</NOSCRIPT>
<SCRIPT>
.. dynamic loading of images ...
</SCRIPT>

Most WYSIWYG editors read the NOSCRIPT and skip the SCRIPT tags. Most
browsers skip the NOSCRIPT and execute the SCRIPT in the script tags.
Chris Tomlinson wrote:
PS: Oh dear, we just realised that if we put the images into JS as per your
demo page, they probably won't appear in WYSIWYG view in web page editors,
correct? Unfortunately these are essential tools due to the imagemaps we
need to draw around all the doors and shop signs, so the JPGs must be
visible in programs such as FrontPage, Dreamweaver, etc. Do you have any
other ideas to control the loading of slices?

Jul 7 '06 #9

P: n/a
To further the education of mankind, "Chris Tomlinson" <an**@anon.com>
vouchsafed:
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?
Here is part of the actual code where I do just that:

function gradel(n) {
if (document.images[n].complete) {
grado(n,0);
} else {
setTimeout("gradel(" + n + ");",200);
}
}

The key, of course, is the "document.images[x].complete" method. You
should be able to figure out how to make a progression from this to suit
your needs.

--
Neredbojias
Infinity has its limits.
Jul 7 '06 #10

P: n/a
On Fri, 07 Jul 2006 09:30:57 +0200, Vincent van Beveren
<vv*********@xiam.nlwrote:
>You could maybe use the NOSCRIPT tag for that?

<NOSCRIPT>
.. plain and simple HTML with maps ...
</NOSCRIPT>
<SCRIPT>
.. dynamic loading of images ...
</SCRIPT>

Most WYSIWYG editors read the NOSCRIPT and skip the SCRIPT tags. Most
browsers skip the NOSCRIPT and execute the SCRIPT in the script tags.
Chris Tomlinson wrote:
>PS: Oh dear, we just realised that if we put the images into JS as per your
demo page, they probably won't appear in WYSIWYG view in web page editors,
correct? Unfortunately these are essential tools due to the imagemaps we
need to draw around all the doors and shop signs, so the JPGs must be
visible in programs such as FrontPage, Dreamweaver, etc. Do you have any
other ideas to control the loading of slices?

The more experienced may well "have at" the following, but -
if you are downloading the entire image in a one-er, and if people are
going to have to scroll *anyway*, why not put the downloaded image in
a <table width="10000" (or whatever size)?

(BTW, I didn't like the thick, kiddie-appearance of the borders.)
Jul 7 '06 #11

P: n/a
"Chris Tomlinson" <an**@anon.comwrote in message
news:Q%******************@text.news.blueyonder.co. uk...
"Brian Cryer" <br*********@127.0.0.1.ntlworld.comwrote in message
news:Uo********************@pipex.net...
<snip>
>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.
Are you sure? because I downloaded the "highstreet" as a single image.
>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?
Agreed. Personally I don't like scrolling - but that's just my preference.
If you want to keep the scroll then consider modifying the site so it isn't
a fixed width. The monitor I'm using at the moment runs at 1600 pixels wide,
so whilst I would still need to scroll, it would help if I didn't have a
white border down the left and right hand sides. No, don't design for a
larger width, just allow your page to adjust to the browser width. (By the
way, I don't normally run my browser window full screen, and at my preferred
size I have a horizontal scroll bar just to see the rest of your page.)

Something else that might help (with loading times at least) would be to
reduce the size (height and width) of the image.
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?
Connection speed here is 512kbps, which is shared amongst the office (12 of
us). Clearing my browser cache and reloading, I think it was about 12seconds
to load everything, although the outline of the site came up much sooner
than that.
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?
The disadvantage of a table (in IE at least) is that IE won't display
anything (of the table) until it has finished reading/downloading all the
html for the table. This means that if the entire page were contained within
a table then IE won't render anything until it has read to the end of the
file. (This doesn't mean it needs to have downloaded the images, just the
HTML.) I take my original comment back, because I see now that you do indeed
have three separate tables and I had originally thought you had just one.
Leave it for now, and ignore my comment.
--
Brian Cryer
www.cryer.co.uk/brian
Jul 7 '06 #12

P: n/a
"Chris Tomlinson" <an**@anon.comwrote in message
news:Xq******************@text.news.blueyonder.co. uk...
PS: Oh dear, we just realised that if we put the images into JS as per
your demo page, they probably won't appear in WYSIWYG view in web page
editors, correct? Unfortunately these are essential tools due to the
imagemaps we need to draw around all the doors and shop signs, so the JPGs
must be visible in programs such as FrontPage, Dreamweaver, etc. Do you
have any other ideas to control the loading of slices?
Two ideas:

1. go with Vincent's suggestion.

2. keep the images in (so you see them in your editor) but have some
javascript which runs on page start up which resets each of the images to
blank before explicitly loading each one. Sounds daft I know, but it means
that the visitor won't have to wait for all the images to load and you can
then control the load order AND it means that a visitor without JavaScript
enabled will still see the images. (Is that clear?) You may have to play
with it to see how practical this is.
--
Brian Cryer
www.cryer.co.uk/brian
Jul 7 '06 #13

P: n/a
<joboils@spam_less_hotmail.comwrote in message
news:ee********************************@4ax.com...
The more experienced may well "have at" the following, but -
if you are downloading the entire image in a one-er, and if people are
going to have to scroll *anyway*, why not put the downloaded image in
a <table width="10000" (or whatever size)?

(BTW, I didn't like the thick, kiddie-appearance of the borders.)
Thanks for the feedback but we don't quite understand. Currently the image
is sliced into 3 sections, and placed in 3 horizontally aligned divs. It
gives the impression of being one long image, but really they load
independently.

How would putting that into a table benefit?
--
Thanks,
Me
Jul 7 '06 #14

P: n/a
"Vincent van Beveren" <vv*********@xiam.nlwrote in message
news:44***********************@news.kpnplanet.nl.. .
You could maybe use the NOSCRIPT tag for that?

<NOSCRIPT>
.. plain and simple HTML with maps ...
</NOSCRIPT>
<SCRIPT>
.. dynamic loading of images ...
</SCRIPT>

Most WYSIWYG editors read the NOSCRIPT and skip the SCRIPT tags. Most
browsers skip the NOSCRIPT and execute the SCRIPT in the script tags.
Good idea, thanks Vincent :)

Would the <scriptsections read the imagemaps in the <noscriptsections,
or would we need to create 2 sets of imagemaps, and put one of them in the
dynamic loading part?
--
Thanks,
Me
Jul 7 '06 #15

P: n/a
"Brian Cryer" <br*********@127.0.0.1.ntlworld.comwrote in message
news:Zd********************@pipex.net...
Two ideas:

1. go with Vincent's suggestion.

2. keep the images in (so you see them in your editor) but have some
javascript which runs on page start up which resets each of the images to
blank before explicitly loading each one. Sounds daft I know, but it means
that the visitor won't have to wait for all the images to load and you can
then control the load order AND it means that a visitor without JavaScript
enabled will still see the images. (Is that clear?) You may have to play
with it to see how practical this is.
This idea is exciting to us. Can you suggest what sort of JS code might
achieve this?
--
Thanks,
Me
Jul 7 '06 #16

P: n/a
"Brian Cryer" <br*********@127.0.0.1.ntlworld.comwrote in message
news:4u********************@pipex.net...
>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.

Are you sure? because I downloaded the "highstreet" as a single image.
That would be very odd if so. Take a look in your cache and for the
Richmond page you will find 6 sliced JPGs. Unless your browser has
Photoshop built in ;)
Agreed. Personally I don't like scrolling - but that's just my preference.
If you want to keep the scroll then consider modifying the site so it
isn't a fixed width. The monitor I'm using at the moment runs at 1600
pixels wide, so whilst I would still need to scroll, it would help if I
didn't have a white border down the left and right hand sides. No, don't
design for a
It's a good idea which we are already planning.
larger width, just allow your page to adjust to the browser width. (By the
way, I don't normally run my browser window full screen, and at my
preferred size I have a horizontal scroll bar just to see the rest of your
page.)
The site will work without a scrollbar at 1024 upwards, so your preferred
width must fall just a bit short of that. Oops, sorry.
Something else that might help (with loading times at least) would be to
reduce the size (height and width) of the image.
We have struggled with this, but it is the optimum height from testing where
users felt they were getting a realistic experience. It also is the
absolute minimum where the smallest ePosters (120x60) actually fit in the
shops' windows. There are many other factors too. And just reducing them
what looks like a lot only resulted in a small reduction in file size. We
are also compressing them to 40%.
>Can we ask your connection speed? How long did it take to load roughly?

Connection speed here is 512kbps, which is shared amongst the office (12
of us). Clearing my browser cache and reloading, I think it was about
12seconds to load everything, although the outline of the site came up
much sooner than that.
That is consistent with our market research. Also the general consensus is
anything under 15 seconds is acceptable to the user, anything more is a
worry. So, whilst we are glad you are within our target range on a shared
slow broadband :) we still want to make the page 'usable' if not fully
loaded, sooner.

The idea there is to present the first JPG slice ASAP, and the rest can
follow as the user doesn't need them until they scroll or cross the road.
>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?

The disadvantage of a table (in IE at least) is that IE won't display
anything (of the table) until it has finished reading/downloading all the
html for the table. This means that if the entire page were contained
within a table then IE won't render anything until it has read to the end
of the file. (This doesn't mean it needs to have downloaded the images,
just the HTML.) I take my original comment back, because I see now that
you do indeed have three separate tables and I had originally thought you
had just one. Leave it for now, and ignore my comment.
Thanks, but for the future, what method do other designers use for
presenting such info as our instructions table etc.? There are a lot of
sites which load pretty graphic 'tables' around the page, but they are
usually divs. Is there a program they use to automatically create these
graphical elements and align them in WYSIWYG? E.g. our partners at
www.GreasyPalm.co.uk
--
Brian Cryer
www.cryer.co.uk/brian
Appreciate your support Brian, many many thanks.
--
Thanks,
Me
Jul 7 '06 #17

P: n/a
"Neredbojias" <http://www.neredbojias.com/fliam.php?cat=alt.htmlwrote in
message news:Xn********************************@208.49.80. 251...
Here is part of the actual code where I do just that:

function gradel(n) {
if (document.images[n].complete) {
grado(n,0);
} else {
setTimeout("gradel(" + n + ");",200);
}
}

The key, of course, is the "document.images[x].complete" method. You
should be able to figure out how to make a progression from this to suit
your needs.
Thanks very much indeed. We will look into this.
--
Thanks,
Me
Jul 7 '06 #18

P: n/a
"Chris Tomlinson" <an**@anon.comwrote in message
news:aY******************@text.news.blueyonder.co. uk...
"Brian Cryer" <br*********@127.0.0.1.ntlworld.comwrote in message
news:Zd********************@pipex.net...
>Two ideas:

1. go with Vincent's suggestion.

2. keep the images in (so you see them in your editor) but have some
javascript which runs on page start up which resets each of the images to
blank before explicitly loading each one. Sounds daft I know, but it
means that the visitor won't have to wait for all the images to load and
you can then control the load order AND it means that a visitor without
JavaScript enabled will still see the images. (Is that clear?) You may
have to play with it to see how practical this is.

This idea is exciting to us. Can you suggest what sort of JS code might
achieve this?
If you look at my original example
(http://www.cryer.co.uk/resources/jav...t/script3.htm), something along
the lines of the code used behind the "reset" button - although resetting to
a blank 1 pixel by 1 pixel white image is probably better than what I've don
on that page. Call that before starting the load.
--
Brian Cryer
www.cryer.co.uk/brian
Jul 7 '06 #19

P: n/a

"Chris Tomlinson" <an**@anon.comwrote in message
news:22******************@text.news.blueyonder.co. uk...
"Brian Cryer" <br*********@127.0.0.1.ntlworld.comwrote in message
news:4u********************@pipex.net...
>>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.

Are you sure? because I downloaded the "highstreet" as a single image.

That would be very odd if so. Take a look in your cache and for the
Richmond page you will find 6 sliced JPGs. Unless your browser has
Photoshop built in ;)
I stand corrected. The image I grabbed was 6907x290 pixels (416KB). I had
assumed it was the full "street", but visually comparing it it looks like
about the first third.

<snip>
The site will work without a scrollbar at 1024 upwards, so your preferred
width must fall just a bit short of that. Oops, sorry.
Yes, not sure exactly what my browser is normally set to, but its less than
1024. I suppose it must be nearer 800, since I can fit two side by side on
my monitor. I accept I'm unusual wanting to see multiple browser windows at
the same time, 1024 seems to be the norm although some sites I've worked on
have targetted 800 (if anything).

<snip>
Thanks, but for the future, what method do other designers use for
presenting such info as our instructions table etc.? There are a lot of
sites which load pretty graphic 'tables' around the page, but they are
usually divs. Is there a program they use to automatically create these
graphical elements and align them in WYSIWYG? E.g. our partners at
www.GreasyPalm.co.uk
Personally, I think your instructions look fine as they are.

Which software are you using to create the site? (i.e. which wysiwyg?) For
my hobby site I use FrontPage 2000 (my commercial stuff is almost
exclusively .NET and thus Visual Studio). I don't know about FrontPage 2003,
but FrontPage 2000 doesn't handle div's very well if you use them for
layout. I've been playing with Microsoft Expression Web Designer (the beta
is a free download) and it seems to handle these very well.
--
Brian Cryer
www.cryer.co.uk/brian
Jul 7 '06 #20

P: n/a
You'd create the images map just in the NOSCRIPT and write a SCRIPT to
copy the content (atleast the images, including image map references) of
the NOSCRIPT. So you just need one set. The advantage of this method is
also that users without JavaScript see the images. You might also
consider using the lowsrc attribute for images
(http://msdn.microsoft.com/workshop/a...es/lowsrc.asp),
though I have the idea FF doesn't listen to it.

Vincent

Chris Tomlinson wrote:
"Vincent van Beveren" <vv*********@xiam.nlwrote in message
news:44***********************@news.kpnplanet.nl.. .
>You could maybe use the NOSCRIPT tag for that?

<NOSCRIPT>
.. plain and simple HTML with maps ...
</NOSCRIPT>
<SCRIPT>
.. dynamic loading of images ...
</SCRIPT>

Most WYSIWYG editors read the NOSCRIPT and skip the SCRIPT tags. Most
browsers skip the NOSCRIPT and execute the SCRIPT in the script tags.

Good idea, thanks Vincent :)

Would the <scriptsections read the imagemaps in the <noscriptsections,
or would we need to create 2 sets of imagemaps, and put one of them in the
dynamic loading part?
Jul 7 '06 #21

P: n/a
Thanks Vincent, we're going to look into this method. Really appreciate
your support and ideas.
--
Thanks,
Me

"Vincent van Beveren" <vv*********@xiam.nlwrote in message
news:44***********************@news.kpnplanet.nl.. .
You'd create the images map just in the NOSCRIPT and write a SCRIPT to
copy the content (atleast the images, including image map references) of
the NOSCRIPT. So you just need one set. The advantage of this method is
also that users without JavaScript see the images. You might also consider
using the lowsrc attribute for images
(http://msdn.microsoft.com/workshop/a...es/lowsrc.asp),
though I have the idea FF doesn't listen to it.

Vincent

Chris Tomlinson wrote:
>"Vincent van Beveren" <vv*********@xiam.nlwrote in message
news:44***********************@news.kpnplanet.nl. ..
>>You could maybe use the NOSCRIPT tag for that?

<NOSCRIPT>
.. plain and simple HTML with maps ...
</NOSCRIPT>
<SCRIPT>
.. dynamic loading of images ...
</SCRIPT>

Most WYSIWYG editors read the NOSCRIPT and skip the SCRIPT tags. Most
browsers skip the NOSCRIPT and execute the SCRIPT in the script tags.

Good idea, thanks Vincent :)

Would the <scriptsections read the imagemaps in the <noscript>
sections, or would we need to create 2 sets of imagemaps, and put one of
them in the dynamic loading part?

Jul 7 '06 #22

P: n/a
"Brian Cryer" <br*********@127.0.0.1.ntlworld.comwrote in message
news:pO********************@pipex.net...
Personally, I think your instructions look fine as they are.

Which software are you using to create the site? (i.e. which wysiwyg?) For
my hobby site I use FrontPage 2000 (my commercial stuff is almost
exclusively .NET and thus Visual Studio). I don't know about FrontPage
2003, but FrontPage 2000 doesn't handle div's very well if you use them
for layout. I've been playing with Microsoft Expression Web Designer (the
beta is a free download) and it seems to handle these very well.
Thanks for the heads-up on that one. We do use FP2003, but Expression looks
far better and seems to be based on FrontPage, and an upgrade of it.

What we hope you can tell us is if Expression will easily allow us to
'convert' our site to CSS retaining its look and feel. Is there some magic
button that will take our <fontattributes for example, and move them into
a CSS format?

Same question but for converting tables into CSS and divs?

Thanks Brian.
Jul 7 '06 #23

P: n/a
"Brian Cryer" <br*********@127.0.0.1.ntlworld.comwrote in message
news:TY********************@pipex.net...
If you look at my original example
(http://www.cryer.co.uk/resources/jav...t/script3.htm), something along
the lines of the code used behind the "reset" button - although resetting
to a blank 1 pixel by 1 pixel white image is probably better than what
I've don on that page. Call that before starting the load.
But wouldn't that the images would still load the old fashioned way, taking
a long time, and then just blank and load again? :-S
--
Thanks,
Me

Try Google Quik-e-search™ at www.Superhighstreet.com/home
....Finds anything or they buy it for you!
Jul 7 '06 #24

P: n/a
Chris Tomlinson schrieb:
"Brian Cryer" <br*********@127.0.0.1.ntlworld.comwrote in message
news:pO********************@pipex.net...
>Personally, I think your instructions look fine as they are.

Which software are you using to create the site? (i.e. which wysiwyg?) For
my hobby site I use FrontPage 2000 (my commercial stuff is almost
exclusively .NET and thus Visual Studio). I don't know about FrontPage
2003, but FrontPage 2000 doesn't handle div's very well if you use them
for layout. I've been playing with Microsoft Expression Web Designer (the
beta is a free download) and it seems to handle these very well.

Thanks for the heads-up on that one. We do use FP2003, but Expression looks
far better and seems to be based on FrontPage, and an upgrade of it.

What we hope you can tell us is if Expression will easily allow us to
'convert' our site to CSS retaining its look and feel. Is there some magic
button that will take our <fontattributes for example, and move them into
a CSS format?
Easiest and best thing would be to learn some HTML and CSS coding...
Not that there aren't programs which could do everything for you, but
the resulting code (in most cases) is just virtual rubbish.
And besides you would find your coding-mistakes yourself and you do not
need all the people here to tell you what you should or shouldn't do
(And perhaps if you understand HTML yourself you would not ignore all
the advises because you know that most of the are right...)
Same question but for converting tables into CSS and divs?
Do it yourself, best result!
>
Thanks Brian.

Jul 7 '06 #25

P: n/a
"Chris Tomlinson" <an**@anon.comwrote in message
news:l6******************@text.news.blueyonder.co. uk...
"Brian Cryer" <br*********@127.0.0.1.ntlworld.comwrote in message
news:pO********************@pipex.net...
>Personally, I think your instructions look fine as they are.

Which software are you using to create the site? (i.e. which wysiwyg?)
For my hobby site I use FrontPage 2000 (my commercial stuff is almost
exclusively .NET and thus Visual Studio). I don't know about FrontPage
2003, but FrontPage 2000 doesn't handle div's very well if you use them
for layout. I've been playing with Microsoft Expression Web Designer (the
beta is a free download) and it seems to handle these very well.

Thanks for the heads-up on that one. We do use FP2003, but Expression
looks far better and seems to be based on FrontPage, and an upgrade of it.
That's the only reason I looked at it. Microsoft have stated that FP2003 is
the last version of FrontPage. Their next (new?) product is Expression.

The beta version (which I've only used for a day or two) is free and does
everything I want from FrontPage - but I've always stayed away from
FrontPage's styles and themes because I know it can lead to some real bloat.
Its certainly an improvement over FrontPage 2000.

I'm not sure I want to get too attached to Expression, because I don't know
whether the beta will stop working at any point and I'm not sure if my
budget would stretch to buying it just yet.
What we hope you can tell us is if Expression will easily allow us to
'convert' our site to CSS retaining its look and feel. Is there some
magic button that will take our <fontattributes for example, and move
them into a CSS format?

Same question but for converting tables into CSS and divs?

Thanks Brian.
I don't think there are any quick shortcuts here.

Jojo's post is spot on. It takes a bit of time, but its worth learning about
CSS (and div's) yourself.. Sorry.
--
Brian Cryer
www.cryer.co.uk/brian


Jul 7 '06 #26

P: n/a
"Chris Tomlinson" <an**@anon.comwrote in message
news:Db******************@text.news.blueyonder.co. uk...
"Brian Cryer" <br*********@127.0.0.1.ntlworld.comwrote in message
news:TY********************@pipex.net...
>If you look at my original example
(http://www.cryer.co.uk/resources/jav...t/script3.htm), something
along the lines of the code used behind the "reset" button - although
resetting to a blank 1 pixel by 1 pixel white image is probably better
than what I've don on that page. Call that before starting the load.

But wouldn't that the images would still load the old fashioned way,
taking a long time, and then just blank and load again? :-S
I wouldn't have *thought* so. If you replace the image then I would *expect*
the browser to cancel its current download - of course what I expect and
what actually happens may be at odds, so it would be worth checking.
--
Brian Cryer
www.cryer.co.uk/brian

Jul 7 '06 #27

P: n/a
Chris Tomlinson wrote:
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.
A couple of ideas:

* using data URLs would do exactly this in almost everything except IE -
because the images are included in the HTML file, they would always load in
order. Be warned that this makes the HTML very large though and IE7
probably also won't support data URLs. Another problem is if you include an
image from two HTML files it has to be loaded twice.

* Restrict number of http connections per client to image resources at the
server end so each person can only get one image at once, but can retrieve
several of any other kind of resource (HTML, CSS etc). You'd just need a
little script that does a few of the things the webserver usually does. Not
sure how you would distinguish people though - doing this by IP (at least
until IPv6) would be bad for users behind a NAT, but maybe there is some
other way.

--
Jim

Jul 9 '06 #28

This discussion thread is closed

Replies have been disabled for this discussion.