www.webdeveloper.com
Results 1 to 5 of 5

Thread: Performance

  1. #1
    Join Date
    Oct 2010
    Posts
    2

    Performance

    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:

    Code:
    $("img").css(key,value)
    methode before but it seems to be not that good.

    Now I use for IE:

    Code:
    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:

    Code:
    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

  2. #2
    Join Date
    Jul 2007
    Location
    Québec
    Posts
    61
    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:

    Code:
    var style = image.style;
    
    style["width"]= 100px;
    But by doing:

    Code:
    var style = image.style;
    
    style.width = '100px';
    Hope this will help ...

  3. #3
    Join Date
    Mar 2009
    Posts
    501
    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.

  4. #4
    Join Date
    Oct 2010
    Posts
    2
    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

  5. #5
    Join Date
    Feb 2010
    Posts
    184
    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.

    Code:
    $("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.

    Code:
    var style = image.style;
    style.width = '100px';
    obviously faster because your doing it for one image.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles