473,626 Members | 3,947 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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


Jul 23 '05 #1
12 2129

"oeyvind toft" <oe******@onlin e.no> wrote in message
news:F3******** ************@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 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;
try
arrayDivs[i].style.backgrou ndImage = '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****@netvisi on.net.il> wrote in message
news:41******** @news.012.net.i l...

"oeyvind toft" <oe******@onlin e.no> wrote in message
news:F3******** ************@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 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;


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


oops
I meant arrayDivs[i].style.backgrou nd = '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****@netvisi on.net.il> skrev i melding
news:41******** @news.012.net.i l...

"J. J. Cale" <ph****@netvisi on.net.il> wrote in message
news:41******** @news.012.net.i l...

"oeyvind toft" <oe******@onlin e.no> wrote in message
news:F3******** ************@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 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;


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


oops
I meant arrayDivs[i].style.backgrou nd = '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.lengt h; i++)
{
myDiv.style.bac kgroundImage = src;


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


oops
I meant arrayDivs[i].style.backgrou nd = '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.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 <gw*****@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq

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


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?ar t_id=958>

Jimbo

"oeyvind toft" <oe******@onlin e.no> wrote in message
news:8v******** ************@ne ws2.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****@netvisi on.net.il> skrev i melding
news:41******** @news.012.net.i l...

"J. J. Cale" <ph****@netvisi on.net.il> wrote in message
news:41******** @news.012.net.i l...

"oeyvind toft" <oe******@onlin e.no> wrote in message
news:F3******** ************@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 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;

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


oops
I meant arrayDivs[i].style.backgrou nd = '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****@netvisi on.net.il> skrev i melding
news:41******** @news.012.net.i l...
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>

Jul 23 '05 #8

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

"oeyvind toft" <oe******@onlin e.no> wrote in message
news:9z******** ************@ne ws2.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****@netvisi on.net.il> skrev i melding
news:41******** @news.012.net.i l...
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>


Jul 23 '05 #10

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

Similar topics

3
2715
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 take up a full webpage width. However, I don't want to put all six images on the page. I thought I could use icons as the trigger for displaying the images one by one. I cropped the six images down to small (but identifiable) icons. Is there...
1
5915
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 onMouseOver and onMouseOut for changing small image into bigger image. when mouse goes on image bigger image is displayd and when mouse goes out, a small image comes back. Can this be done also with CSS? I read with rollover is possible to change...
12
2573
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 enabled to read it. After searching for other opinions on the web, I found that some estimate that the frequency of browsers that can read JS currently is better than 90% -- that is certainly workable for me! Do you good people have any thoughts...
4
2509
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 here... I have a gut-feeling that it will be better to use (a lot of ) smaller (very specific) files, giving you
1
6253
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 small images, most of them not exceeding 5KB. There is about a gigabyte of these small files. We're currently storing the files on disk and the other information about the file in the database (historical reasons that I won't complain about here)....
8
6315
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 the images, but how can I make this thing happen?
18
2457
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 php and mysql: Create a table mc_jscount table in mysql with two fields nonjs (int) and js (int). Create one record with nonjs and js set to zero. Put this code at the top of your page:
1
2499
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 now i need to show the large image to left side when user clicks on these small images but when i click on the images it is showing the large image in the new browser
3
2502
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 now i need to show the large image to left side when user clicks on these small images but when i click on the images it is showing the large image in the new browser
0
8266
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8199
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
8705
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8638
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
8505
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6125
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5574
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
1
2626
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
1511
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.