Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Specify loading order of JPGs?

Reply
Thread Tools

Specify loading order of JPGs?

 
 
Chris Tomlinson
Guest
Posts: n/a
 
      07-06-2006
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!


 
Reply With Quote
 
 
 
 
Spartanicus
Guest
Posts: n/a
 
      07-06-2006
"Chris Tomlinson" <(E-Mail Removed)> wrote:

>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.

--
Spartanicus
 
Reply With Quote
 
 
 
 
Vincent van Beveren
Guest
Posts: n/a
 
      07-06-2006
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.

 
Reply With Quote
 
Chris Tomlinson
Guest
Posts: n/a
 
      07-06-2006
"Spartanicus" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...

>>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.


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!


 
Reply With Quote
 
Spartanicus
Guest
Posts: n/a
 
      07-06-2006
"Chris Tomlinson" <(E-Mail Removed)> wrote:

>>>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.

>
>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.

--
Spartanicus
 
Reply With Quote
 
Brian Cryer
Guest
Posts: n/a
 
      07-06-2006
"Chris Tomlinson" <(E-Mail Removed)> wrote in message
news:G44rg.97072$(E-Mail Removed). 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



 
Reply With Quote
 
mbstevens
Guest
Posts: n/a
 
      07-06-2006
On Thu, 06 Jul 2006 11:04:57 +0000, Spartanicus wrote:

> 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.
--
mbstevens
http://www.mbstevens.com/howtothumb

 
Reply With Quote
 
Chris Tomlinson
Guest
Posts: n/a
 
      07-06-2006
"mbstevens" <(E-Mail Removed)> wrote in message
news(E-Mail Removed) m...
> On Thu, 06 Jul 2006 11:04:57 +0000, Spartanicus wrote:
>
>> 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.


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!


 
Reply With Quote
 
Chris Tomlinson
Guest
Posts: n/a
 
      07-06-2006
Thanks Vincent, we will look into this.

"Vincent van Beveren" <(E-Mail Removed)> wrote in message
news:44acd48a$0$13213$(E-Mail Removed).. .
> 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.



 
Reply With Quote
 
Chris Tomlinson
Guest
Posts: n/a
 
      07-06-2006
"Brian Cryer" <brian.cryer@127.0.0.1.ntlworld.com> wrote in message
news(E-Mail Removed)...
> "Chris Tomlinson" <(E-Mail Removed)> wrote in message
> news:G44rg.97072$(E-Mail Removed). 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!


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to *not* specify the order of occurrence? Stephan Mann XML 8 07-03-2009 01:03 PM
order of iframe loading with document loading ofir Javascript 0 12-03-2007 12:06 PM
Specify loading order of JPGs? Chris Tomlinson Javascript 24 07-09-2006 10:13 PM
Re: Specify loading order of JPGs? jojo HTML 5 07-08-2006 11:05 AM
xsd - how to specify sibling elements in any order redog6@hotmail.com XML 2 10-18-2005 08:02 AM



Advertisments