Performance

[Yoggelito]

Hey out there,

I'm currently developing a web application in JQuery but I'm struggling with the performance of IE and Ipad so I decided to write the CSS manipulation in native JS.

I used the:

$("img").css(key,value)

methode before but it seems to be not that good.

Now I use for IE:

var style = image.style;

style["width"]= 100px;

Method and it seems to be better.

My Question is, is there a nother maybe even better way to do CSS manipulation?

Also I tried to work with the coding on Firefox but the:

var style = image.style;

style["width"]= 100px;

didn't work? Can anybody explain me why?

Thanks in advance and I hope there are not that many mistakes in this Question

[Nihiliste]

First, for other ways to manipulate CSS, I don't see anything else that what you already said.

Second, I didn't do native JS to manipulate CSS since a long time, but as far as I can remerber, you don't do it by:

var style = image.style;

style["width"]= 100px;

But by doing:

var style = image.style;

style.width = '100px';

Hope this will help ...

[Tcobb]

Assuming that you have given the specific image an id, (such as "im1" for this example) within the image tag itself as in <image ... id="im1" /> then you can alter the style by:

var im = document.getElementById("im1");
im.style.width = "100px";

Although you don't make it clear exactly what the big picture is, if you want to force the
style on all of the images you could do something like this:

var all_Images = document.getElementsByTagName("image");
var i, len;
len = all_Images.length;
for(i =0; i < len; i++){
all_Images[i].style.width = "100px";
}

But once again, you have not been very specific about what you are trying to do.

[Yoggelito]

Hey,

thanks for your answers.

To point it out:

I'm building an navigation animation which displays images in a sphere and so I have to do css manipulation very often to set opacities, width, height, as well as the x and y position.

I've made a prototyping which is already working cross browser but I'm struggling with performance issues.

I've used the JQuery css manipulation method, which itself uses javascript within the library.

So my problem is now, how can I manipulate the css properties the fast way.

There is no problem of getting the images by id or tags, this is already working, just the manipulation is not fast enough.

I hope that helps

Thanks in advance for all your posts

[letmehaveago]

Profile your code and see where the bottle necks are. Jquery adds a little overhead to css but I wouldn't think that is the problem.

$("img").css(key,value)

Is bad because it will search the whole document for img tags and change the style. You would do better to cache it first.

var style = image.style;
style.width = '100px';

obviously faster because your doing it for one image.