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.length; i++)
{
myDiv.style.backgroundImage = 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

 

[J. J. Cale]

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.length; i++)
{
myDiv.style.backgroundImage = src;

try
arrayDivs.style.backgroundImage = 'url('+src+')';

 

[J. J. Cale]

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.length; i++)
{
myDiv.style.backgroundImage = src;

try
arrayDivs.style.backgroundImage = 'url('+src+')';

oops
I meant arrayDivs.style.background = 'url('+src+')';

 

[oeyvind toft]

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/

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.length; i++)
{
myDiv.style.backgroundImage = src;

try
arrayDivs.style.backgroundImage = 'url('+src+')';

oops
I meant arrayDivs.style.background = 'url('+src+')';

 

[Grant Wagner]

var src = "url(someImage.jpg)";
for(var i = 0; i < arrayDivs.length; i++)
{
myDiv.style.backgroundImage = src;

try
arrayDivs.style.backgroundImage = 'url('+src+')';

oops
I meant arrayDivs.style.background = 'url('+src+')';

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.length;
while (ii--) {
// I'm assuming the OP meant each array element
// is a <div>
arrayDivs[ii].style.backgroundImage = 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.getElementsByTagName('div');

var start = (new Date()).valueOf();
for (var jj = 0; jj < 1000; ++jj) {
var ii = arrayDivs.length;
while (ii--) {
arrayDivs[ii].style.backgroundImage = 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.length; ++ii) {
arrayDivs[ii].style.backgroundImage = 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.length- 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).

 

[oeyvind toft]

Most of the speed savings are because -arrayDivs.length- 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).

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

 

[J. J. Cale]

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?art_id=958>

Jimbo

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/

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.length; i++)
{
myDiv.style.backgroundImage = src;

try
arrayDivs.style.backgroundImage = 'url('+src+')';

oops
I meant arrayDivs.style.background = 'url('+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

 

[oeyvind toft]

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

 

[J. J. Cale]

<snip>
Grant from what I have read
<http://www.bazon.net/mishoo/articles.epl?art_id=958>
<http://dean.edwards.name/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]

Thanks JJ !! That was pretty interesting reading !

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

 

[Grant Wagner]

<snip>
Grant from what I have read
<http://www.bazon.net/mishoo/articles.epl?art_id=958>
<http://dean.edwards.name/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

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.getElementsByTagName('div');
var ii = divs.length;
while (ii-- > 0) {
divs[ii].style.backgroundImage = 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.

 

[oeyvind toft]

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.

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

 

[oeyvind toft]

"J. J. Cale" wrote:

<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.getElementsByTagName('div');
var ii = divs.length;
while (ii-- > 0) {
divs[ii].style.backgroundImage = 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.

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