Many small images

[oeyvind toft]

I`m writing a pattern machine in JS.

I use small (20-50px) dynamicly created divs (100-200) and use loops to
place them
in predefined patterns. I assign style props to them at creation time.

Problem:
When assigning a background image to the style object of the divs, it takes
10 - 12 seconds before
they are displayed on screen. For now I`ve used the same image (2kB) for all
divs.

It looks something like this:

var src = "url(someImage. jpg)";
for(var i = 0; i < arrayDivs.lengt h; i++)
{
myDiv.style.bac kgroundImage = src;
}

I have a medium fast machine and the testing is done locally.
I would very much like to have this work faster.
If you know any tricks that can be used to speed up the process please
inform me.

Oeyvind

--

http://home.online.no/~oeyvtoft/ToftWeb/

[J. J. Cale]

Re: Many small images


"oeyvind toft" <oeyvtoft@onlin e.no> wrote in message
news:F3Csd.1123 9$rh1.269693@ne ws2.e.nsc.no...[color=blue]
> I`m writing a pattern machine in JS.
>
> I use small (20-50px) dynamicly created divs (100-200) and use loops to
> place them
> in predefined patterns. I assign style props to them at creation time.
>
> Problem:
> When assigning a background image to the style object of the divs, it[/color]
takes[color=blue]
> 10 - 12 seconds before
> they are displayed on screen. For now I`ve used the same image (2kB) for[/color]
all[color=blue]
> divs.
>
> It looks something like this:
>
> var src = "url(someImage. jpg)";
> for(var i = 0; i < arrayDivs.lengt h; i++)
> {
> myDiv.style.bac kgroundImage = src;[/color]

try
arrayDivs[i].style.backgrou ndImage = 'url('+src+')';
[color=blue]
> }
>
> I have a medium fast machine and the testing is done locally.
> I would very much like to have this work faster.
> If you know any tricks that can be used to speed up the process please
> inform me.
>
> Oeyvind
>
> --
> http://home.online.no/~oeyvtoft/ToftWeb/
>
>
>
>[/color]

[J. J. Cale]

Re: Many small images


"J. J. Cale" <photom@netvisi on.net.il> wrote in message
news:41b30010$1 @news.012.net.i l...[color=blue]
>
> "oeyvind toft" <oeyvtoft@onlin e.no> wrote in message
> news:F3Csd.1123 9$rh1.269693@ne ws2.e.nsc.no...[color=green]
> > I`m writing a pattern machine in JS.
> >
> > I use small (20-50px) dynamicly created divs (100-200) and use loops to
> > place them
> > in predefined patterns. I assign style props to them at creation time.
> >
> > Problem:
> > When assigning a background image to the style object of the divs, it[/color]
> takes[color=green]
> > 10 - 12 seconds before
> > they are displayed on screen. For now I`ve used the same image (2kB) for[/color]
> all[color=green]
> > divs.
> >
> > It looks something like this:
> >
> > var src = "url(someImage. jpg)";
> > for(var i = 0; i < arrayDivs.lengt h; i++)
> > {
> > myDiv.style.bac kgroundImage = src;[/color]
>
> try
> arrayDivs[i].style.backgrou ndImage = 'url('+src+')';[/color]

oops
I meant arrayDivs[i].style.backgrou nd = 'url('+src+')';[color=blue]
>[color=green]
> > }
> >
> > I have a medium fast machine and the testing is done locally.
> > I would very much like to have this work faster.
> > If you know any tricks that can be used to speed up the process please
> > inform me.
> >
> > Oeyvind
> >
> > --
> > http://home.online.no/~oeyvtoft/ToftWeb/
> >
> >
> >
> >[/color]
>
>[/color]

[oeyvind toft]

Re: Many small images

Thanks for the advice JJ.

I`ve tried your suggestion but I dont see any difference in speed.

I`m wondering if there are other ways to set up the whole thing. Something
similar
to preloading images. It just take too long time going through a loop
assigning the image to
the divs bg.

Oeyvind

--

http://home.online.no/~oeyvtoft/ToftWeb/

"J. J. Cale" <photom@netvisi on.net.il> skrev i melding
news:41b30138$1 @news.012.net.i l...[color=blue]
>
> "J. J. Cale" <photom@netvisi on.net.il> wrote in message
> news:41b30010$1 @news.012.net.i l...[color=green]
> >
> > "oeyvind toft" <oeyvtoft@onlin e.no> wrote in message
> > news:F3Csd.1123 9$rh1.269693@ne ws2.e.nsc.no...[color=darkred]
> > > I`m writing a pattern machine in JS.
> > >
> > > I use small (20-50px) dynamicly created divs (100-200) and use loops[/color][/color][/color]
to[color=blue][color=green][color=darkred]
> > > place them
> > > in predefined patterns. I assign style props to them at creation time.
> > >
> > > Problem:
> > > When assigning a background image to the style object of the divs, it[/color]
> > takes[color=darkred]
> > > 10 - 12 seconds before
> > > they are displayed on screen. For now I`ve used the same image (2kB)[/color][/color][/color]
for[color=blue][color=green]
> > all[color=darkred]
> > > divs.
> > >
> > > It looks something like this:
> > >
> > > var src = "url(someImage. jpg)";
> > > for(var i = 0; i < arrayDivs.lengt h; i++)
> > > {
> > > myDiv.style.bac kgroundImage = src;[/color]
> >
> > try
> > arrayDivs[i].style.backgrou ndImage = 'url('+src+')';[/color]
>
> oops
> I meant arrayDivs[i].style.backgrou nd = 'url('+src+')';[color=green]
> >[color=darkred]
> > > }
> > >
> > > I have a medium fast machine and the testing is done locally.
> > > I would very much like to have this work faster.
> > > If you know any tricks that can be used to speed up the process please
> > > inform me.
> > >
> > > Oeyvind
> > >
> > > --
> > > http://home.online.no/~oeyvtoft/ToftWeb/
> > >
> > >
> > >
> > >[/color]
> >
> >[/color]
>
>[/color]

[Grant Wagner]

Re: Many small images

"J. J. Cale" wrote:
[color=blue][color=green][color=darkred]
> > > var src = "url(someImage. jpg)";
> > > for(var i = 0; i < arrayDivs.lengt h; i++)
> > > {
> > > myDiv.style.bac kgroundImage = src;[/color]
> >
> > try
> > arrayDivs[i].style.backgrou ndImage = 'url('+src+')';[/color]
>
> oops
> I meant arrayDivs[i].style.backgrou nd = 'url('+src+')';[/color]

How do you suppose concatenating 3 strings each pass through the loop is going
to be faster than assigning a fixed string? And assigning the -background- style
rather than -backgroundImage-, the user agent probably has to do more work to
determine what aspect of the -background- style is being set. About the only
thing the OP can do to speed up the loop is to do this:

var ii = arrayDivs.lengt h;
while (ii--) {
// I'm assuming the OP meant each array element
// is a <div>
arrayDivs[ii].style.backgrou ndImage = src;
}

Note that the speed difference will not be significant, he would have to loop
through arrayDivs about 1000 times to produce a noticable effect.

<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
<script type="text/javascript">
var src = '';
var arrayDivs = document.getEle mentsByTagName( 'div');

var start = (new Date()).valueOf ();
for (var jj = 0; jj < 1000; ++jj) {
var ii = arrayDivs.lengt h;
while (ii--) {
arrayDivs[ii].style.backgrou ndImage = src;
}
}
document.write( ((new Date()).valueOf () - start) + '<br>');

var start = (new Date()).valueOf ();
for (var jj = 0; jj < 1000; ++jj) {
for (var ii = 0; ii < arrayDivs.lengt h; ++ii) {
arrayDivs[ii].style.backgrou ndImage = src;
}
}
document.write( ((new Date()).valueOf () - start) + '<br>');

</script>

IE 6.0.2800: 1125 and 1265
Firefox 1.0: 1469 and 1750
Opera 7.54: 78 and 125

Most of the speed savings are because -arrayDivs.lengt h- is not accessed on each
pass through the loop. Ultimately, this time savings is completely overshadowed
by the fact that setting the -backgroundImage- style requires the browser to do
a GET against the http server and retrieve the image (the browser has to
download the image at least once).

--
Grant Wagner <gwagner@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq

[oeyvind toft]

Re: Many small images

"Grant Wagner" <gwagner@agrico reunited.com> skrev i melding
news:41B4AEBA.E A695D40@agricor eunited.com...[color=blue]
> Most of the speed savings are because -arrayDivs.lengt h- is not accessed[/color]
on each[color=blue]
> pass through the loop. Ultimately, this time savings is completely[/color]
overshadowed[color=blue]
> by the fact that setting the -backgroundImage- style requires the browser[/color]
to do[color=blue]
> a GET against the http server and retrieve the image (the browser has to
> download the image at least once).[/color]

Thanks for your thorough reply Grant...

I agree that the problem here is probably not in the loop but in the way the
browser handles loading
the image. (When assigning a bg color instead of a bg image the divs are
displayed much faster)

In my case the testing is done locally and the same image is used on all
divs. The image is about 2 kB.
I would expect the loading and display to happen quite fast.

I wonder if there is a way to trick the browser into doing its work in
another way...?
Or can it be a system / disdplay issue ??

(If I cant get it to work faster I plan to test the same sort of stuff in
Flash and see how it handles it)


Oeyvind

--

http://home.online.no/~oeyvtoft/ToftWeb/

[J. J. Cale]

Re: Many small images

Have a look at this. I suspect that your browser is reloading the image from
the server on each request instead of 'properly' cacheing it. Useing CSS to
load the image might cause a different behavior but in any case it is
addressed here. HTH
<http://www.bazon.net/mishoo/articles.epl?ar t_id=958>

Jimbo

"oeyvind toft" <oeyvtoft@onlin e.no> wrote in message
news:8vDsd.1124 9$rh1.270018@ne ws2.e.nsc.no...[color=blue]
> Thanks for the advice JJ.
>
> I`ve tried your suggestion but I dont see any difference in speed.
>
> I`m wondering if there are other ways to set up the whole thing. Something
> similar
> to preloading images. It just take too long time going through a loop
> assigning the image to
> the divs bg.
>
> Oeyvind
>
> --
> http://home.online.no/~oeyvtoft/ToftWeb/
>
>
>
> "J. J. Cale" <photom@netvisi on.net.il> skrev i melding
> news:41b30138$1 @news.012.net.i l...[color=green]
> >
> > "J. J. Cale" <photom@netvisi on.net.il> wrote in message
> > news:41b30010$1 @news.012.net.i l...[color=darkred]
> > >
> > > "oeyvind toft" <oeyvtoft@onlin e.no> wrote in message
> > > news:F3Csd.1123 9$rh1.269693@ne ws2.e.nsc.no...
> > > > I`m writing a pattern machine in JS.
> > > >
> > > > I use small (20-50px) dynamicly created divs (100-200) and use loops[/color][/color]
> to[color=green][color=darkred]
> > > > place them
> > > > in predefined patterns. I assign style props to them at creation[/color][/color][/color]
time.[color=blue][color=green][color=darkred]
> > > >
> > > > Problem:
> > > > When assigning a background image to the style object of the divs,[/color][/color][/color]
it[color=blue][color=green][color=darkred]
> > > takes
> > > > 10 - 12 seconds before
> > > > they are displayed on screen. For now I`ve used the same image (2kB)[/color][/color]
> for[color=green][color=darkred]
> > > all
> > > > divs.
> > > >
> > > > It looks something like this:
> > > >
> > > > var src = "url(someImage. jpg)";
> > > > for(var i = 0; i < arrayDivs.lengt h; i++)
> > > > {
> > > > myDiv.style.bac kgroundImage = src;
> > >
> > > try
> > > arrayDivs[i].style.backgrou ndImage = 'url('+src+')';[/color]
> >
> > oops
> > I meant arrayDivs[i].style.backgrou nd = 'url('+src+')';[color=darkred]
> > >
> > > > }
> > > >
> > > > I have a medium fast machine and the testing is done locally.
> > > > I would very much like to have this work faster.
> > > > If you know any tricks that can be used to speed up the process[/color][/color][/color]
please[color=blue][color=green][color=darkred]
> > > > inform me.
> > > >
> > > > Oeyvind
> > > >
> > > > --
> > > > http://home.online.no/~oeyvtoft/ToftWeb/
> > > >
> > > >
> > > >
> > > >
> > >
> > >[/color]
> >
> >[/color]
>
>[/color]

[oeyvind toft]

Re: Many small images

Thanks JJ !! That was pretty interesting reading !

I`ve tried assigning a classname to the divs instead of setting the style
props
individually when creating the divs, but there isnt much, if any, diff in
the resulting speed.

Oeyvind
--

http://home.online.no/~oeyvtoft/ToftWeb/

"J. J. Cale" <photom@netvisi on.net.il> skrev i melding
news:41b5714b$1 @news.012.net.i l...[color=blue]
> Have a look at this. I suspect that your browser is reloading the image[/color]
from[color=blue]
> the server on each request instead of 'properly' cacheing it. Useing CSS[/color]
to[color=blue]
> load the image might cause a different behavior but in any case it is
> addressed here. HTH
> <http://www.bazon.net/mishoo/articles.epl?ar t_id=958>
>[/color]

[J. J. Cale]

Re: Many small images


<snip>
Grant from what I have read
<http://www.bazon.net/mishoo/articles.epl?ar t_id=958>
<http://dean.edwards.na me/my/flicker.html>
this appears to be a deliberate M$ bug with only a server workaround
possible.

<quote from dean.edwards>

only affects IE6.0 (not IE5.0/5.5)

only affects CSS background-images which are influenced by some dynamic
effect on the page (these are numerous and are not just hovers)

is especially persistent when IE's cache settings are "Every visit to the
page" (a common developer's setting)

</quote>

One might deduce from the above that preloading the background image in the
browser and setting the src for each appended child image could change the
result. I haven't had time to test this.
To quote Mishoo I'm going to throw up.
Jimbo

[J. J. Cale]

Re: Many small images


"oeyvind toft" <oeyvtoft@onlin e.no> wrote in message
news:9zetd.1152 3$rh1.274547@ne ws2.e.nsc.no...[color=blue]
> Thanks JJ !! That was pretty interesting reading !
>[/color]
Reading this gave me an idea. Not one I would normally use.

http://dean.edwards.name/my/flicker.html

the above states
*only affects CSS background-images* which are influenced by some dynamic
effect on the page (these are numerous and are not just hovers)

is especially persistent when IE's cache settings are "Every visit to the
page" (a common developer's setting)

possibly you could use a table for layout since (if I remember) you can set
the background image of each cell without using CSS. Then preload the image
and assign it to each cell. I haven't tried this. But it might work for you.
Otherwise IE6 will serve them every time.

Jimbo[color=blue]
> I`ve tried assigning a classname to the divs instead of setting the style
> props
> individually when creating the divs, but there isnt much, if any, diff in
> the resulting speed.
>
> Oeyvind
> --
> http://home.online.no/~oeyvtoft/ToftWeb/
>
>
>
> "J. J. Cale" <photom@netvisi on.net.il> skrev i melding
> news:41b5714b$1 @news.012.net.i l...[color=green]
> > Have a look at this. I suspect that your browser is reloading the image[/color]
> from[color=green]
> > the server on each request instead of 'properly' cacheing it. Useing[/color][/color]
CSS[color=blue]
> to[color=green]
> > load the image might cause a different behavior but in any case it is
> > addressed here. HTH
> > <http://www.bazon.net/mishoo/articles.epl?ar t_id=958>
> >[/color]
>
>[/color]

[Grant Wagner]

Re: Many small images

"J. J. Cale" wrote:
[color=blue]
> <snip>
> Grant from what I have read
> <http://www.bazon.net/mishoo/articles.epl?ar t_id=958>
> <http://dean.edwards.na me/my/flicker.html>
> this appears to be a deliberate M$ bug with only a server workaround
> possible.
>
> <quote from dean.edwards>
>
> only affects IE6.0 (not IE5.0/5.5)
>
> only affects CSS background-images which are influenced by some dynamic
> effect on the page (these are numerous and are not just hovers)
>
> is especially persistent when IE's cache settings are "Every visit to the
> page" (a common developer's setting)
>
> </quote>
>
> One might deduce from the above that preloading the background image in the
> browser and setting the src for each appended child image could change the
> result. I haven't had time to test this.
> To quote Mishoo I'm going to throw up.
> Jimbo[/color]

That sounds like a reasonable experiment:

<div></div><div></div><div></div>
<script type="text/javascript">
var theImage = '../images/myImage.gif';
var img = new Image();
img.onload = setBgImages;
img.src = theImage;

function setBgImages() {
var divs = document.getEle mentsByTagName( 'div');
var ii = divs.length;
while (ii-- > 0) {
divs[ii].style.backgrou ndImage = theImage;
}
}
</script>

By doing it this way, the code to set the -backgroundImage- style is only
executed after the image has been loaded (and hopefully cached) by the browser.

--
Grant Wagner <gwagner@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq

[oeyvind toft]

Re: Many small images

"J. J. Cale" <photom@netvisi on.net.il> skrev i melding
news:41b58983$1 @news.012.net.i l...[color=blue]
> possibly you could use a table for layout since (if I remember) you can[/color]
set[color=blue]
> the background image of each cell without using CSS. Then preload the[/color]
image[color=blue]
> and assign it to each cell. I haven't tried this. But it might work for[/color]
you.[color=blue]
> Otherwise IE6 will serve them every time.[/color]

Thanks again JJ...

That sounds like a good idea. I`ll test it as soon as I get back to this
project (Got a whole bunch
of work in my lap today)

Oeyvind
--

http://home.online.no/~oeyvtoft/ToftWeb/

[oeyvind toft]

Re: Many small images

"Grant Wagner" <gwagner@agrico reunited.com> skrev i melding
news:41B5C457.F CADD57E@agricor eunited.com...[color=blue]
> "J. J. Cale" wrote:[/color]
[color=blue]
> <div></div><div></div><div></div>
> <script type="text/javascript">
> var theImage = '../images/myImage.gif';
> var img = new Image();
> img.onload = setBgImages;
> img.src = theImage;
>
> function setBgImages() {
> var divs = document.getEle mentsByTagName( 'div');
> var ii = divs.length;
> while (ii-- > 0) {
> divs[ii].style.backgrou ndImage = theImage;
> }
> }
> </script>
>
> By doing it this way, the code to set the -backgroundImage- style is only
> executed after the image has been loaded (and hopefully cached) by the[/color]
browser.

Thanks Grant.

I`ll give this a try as soon as I get time.

BTW, I reduced the loading/display a good deal by moving
some stuff outside the loop that assigns the styles. I was setting some
common vars
for each iteration of the loop !! Am I a bad programmer or what ??!!

Still thou, its not as fast as I would like...

Oeyvind

--

http://home.online.no/~oeyvtoft/ToftWeb/