CODEWITHSUNDEEP
jquerymobile-safari
Frederik Witte
Frederik Witte

Reputation: 1345

jQuery performance bad on iPad

I have some problems with the performance of this. On the computer it works just fine, but it's for an iPad presentation and the page is loading really slow and on click the object doesnt fade out and after some time the next object just appears and the button is active. Anyone can tell me how this comes? That the iPad is lagging and the Computer is not?

$('body').click(function(e){
                    var evt = e ? e:window.event;
                    evt.stopPropagation();
                    var Elem = e.target;
                    if(Elem.id == 'front'){
                        if($('#dc70-1').css('display')=='none'){
                            $('img:visible').fadeOut('slow', function(){
                                $('#dc70-1').fadeIn('slow');
                            });
                            $('button.active').removeClass('active');
                            $('#front').addClass('active');
                        }
                    }

                    else if(Elem.id == 'extended'){
                        if($('#dc70-2').css('display')=='none'){
                        $('img:visible').fadeOut('slow', function(){
                            $('#dc70-2').fadeIn('slow');
                        });

                        $('button.active').removeClass('active');
                        $('#extended').addClass('active');
                        }
                    }

                    else if(Elem.id == 'right'){
                        if($('#dc70-3').css('display')=='none'){
                        $('img:visible').fadeOut('slow', function(){
                            $('#dc70-3').fadeIn('slow');
                        });

                        $('button.active').removeClass('active');
                        $('#right').addClass('active');
                        }
                    }

                    else if(Elem.id == 'left'){
                        if($('#dc70-4').css('display')=='none'){
                        $('img:visible').fadeOut('slow', function(){
                            $('#dc70-4').fadeIn('slow');
                        });

                        $('button.active').removeClass('active');
                        $('#left').addClass('active');
                        }
                    }
                });

Edit: The problem was the following: I had a $(windows).on('resize', function()) trigger as the wrap. Because in another document I had to use this, because the jquery variables were loading before the content was loading. So then I forgot to put the resize trigger out(because I'm using the click event now) and after I put it away, then it worked. So never double wrap your triggers :D

Upvotes: 0

Views: 474

Answers (1)

Jeff Fritz
Jeff Fritz

Reputation: 9861

Each time you use the $() operator to traverse the DOM, jQuery takes some time to parse and navigate the document. When you have many of these calls stacked up in a method call, as you do, they will slow down operations.

You can cache the results of a jQuery traversal with some syntax like this:

var $left = $("#left");

In further use of the #left element, use the $left variable instead. I prefer to name variables that point to jQuery objects with the $ prefix so that I know its a jQuery object.

Try using native search and manipulation commands. This will also reduce the overhead of going through the jQuery abstraction. For example, instead of:

$("#left").addClass("active")

try

document.getElementById("left").classList.add('active');

Upvotes: 1

Related Questions