473,386 Members | 1,720 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,386 software developers and data experts.

Many small images

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

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


Jul 23 '05 #1
12 2111

"oeyvind toft" <oe******@online.no> wrote in message
news:F3********************@news2.e.nsc.no...
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[i].style.backgroundImage = '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

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

Jul 23 '05 #2

"J. J. Cale" <ph****@netvision.net.il> wrote in message
news:41********@news.012.net.il...

"oeyvind toft" <oe******@online.no> wrote in message
news:F3********************@news2.e.nsc.no...
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[i].style.backgroundImage = 'url('+src+')';


oops
I meant arrayDivs[i].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

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


Jul 23 '05 #3
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" <ph****@netvision.net.il> skrev i melding
news:41********@news.012.net.il...

"J. J. Cale" <ph****@netvision.net.il> wrote in message
news:41********@news.012.net.il...

"oeyvind toft" <oe******@online.no> wrote in message
news:F3********************@news2.e.nsc.no...
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[i].style.backgroundImage = 'url('+src+')';


oops
I meant arrayDivs[i].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

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



Jul 23 '05 #4
"J. J. Cale" wrote:
var src = "url(someImage.jpg)";
for(var i = 0; i < arrayDivs.length; i++)
{
myDiv.style.backgroundImage = src;


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


oops
I meant arrayDivs[i].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).

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

Jul 23 '05 #5
"Grant Wagner" <gw*****@agricoreunited.com> skrev i melding
news:41***************@agricoreunited.com...
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

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




Jul 23 '05 #6
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

"oeyvind toft" <oe******@online.no> wrote in message
news:8v********************@news2.e.nsc.no...
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" <ph****@netvision.net.il> skrev i melding
news:41********@news.012.net.il...

"J. J. Cale" <ph****@netvision.net.il> wrote in message
news:41********@news.012.net.il...

"oeyvind toft" <oe******@online.no> wrote in message
news:F3********************@news2.e.nsc.no...
> 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[i].style.backgroundImage = 'url('+src+')';


oops
I meant arrayDivs[i].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
>
> --
> http://home.online.no/~oeyvtoft/ToftWeb/
>
>
>
>



Jul 23 '05 #7
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" <ph****@netvision.net.il> skrev i melding
news:41********@news.012.net.il...
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>

Jul 23 '05 #8

<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
Jul 23 '05 #9

"oeyvind toft" <oe******@online.no> wrote in message
news:9z********************@news2.e.nsc.no...
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 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" <ph****@netvision.net.il> skrev i melding
news:41********@news.012.net.il...
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>


Jul 23 '05 #10
"J. J. Cale" wrote:
<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.

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

Jul 23 '05 #11
"J. J. Cale" <ph****@netvision.net.il> skrev i melding
news:41********@news.012.net.il...
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
--
http://home.online.no/~oeyvtoft/ToftWeb/


Jul 23 '05 #12
"Grant Wagner" <gw*****@agricoreunited.com> skrev i melding
news:41***************@agricoreunited.com...
"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

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

Jul 23 '05 #13

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: DOK | last post by:
I'm creating an ad for eBay and want to keep the page condensed. I have 6 images - different views of an antique lap steel guitar - that need to show superb detail. I have cropped the images to...
1
by: Raigo | last post by:
For a large product database on the web, with images for each product, I need to display a preview image (thumbnail) and a big image. So far I have done these things with Javascript using...
12
by: confused | last post by:
After expressing my interest in expanding my new knowledge of HTML and CSS into the wild realm of JavaScript, I was advised that it is wiser to avoid it, since not all browsers are use it or are...
4
by: Dag Sunde | last post by:
Just wondering if anyone have looked into this? How to split up ones JavaScript library? A lot of very specific (and small) .js files, or a few larger files. I'm thinking about load-time...
1
by: Matthew Hixson | last post by:
I am currently working on a Java web application in which we are making use of the JDBC driver for Postgres 7.4.1. Part of our application allows the administrators to manage a large number of...
8
by: handersonVA | last post by:
Hello, I'd like to put small images around a big image, so when a small image is clicked, that image is shown as a big image in the center. how should I do that? I will use a table tag to organize...
18
by: damezumari | last post by:
I would like to know how many of the visitors to my site has js enabled and how many has it turned off. I haven't found a simple solution searching Google groups so I suggest the following using...
1
by: swetha123 | last post by:
hello, Can any one please tell me I am Using php,Mysql,CSS to build my site In my database i have small images and large images i am show the small images to the right of the main container...
3
by: swetha123 | last post by:
hello, Can any one please tell me I am Using php,Mysql,CSS to build my site In my database i have small images and large images i am show the small images to the right of the main container...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.