CODEWITHSUNDEEP
jquery-mobile
Osman
Osman

Reputation: 1771

jQuery mobile running laggy w/ delayed response

I seem to be having some trouble setting up and playing with jquery mobile. The issue is that if you hover over list items in a ul you get a huge delay in the animation, same with hovering on the tablet. My page is simple and almost exactly taken from a jQuery mobile tutorial. You can see the code below or visit : aliahealthcare.com/jquerymobile to reproduce the same environment. Thanks!

my Code:

 <!DOCTYPE html> 
<html> 
<head> 
<title>My Page</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="https://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head> 
<body> 

<div data-role="page">

<div data-role="header">
    <h1>Select a Class Type</h1>
</div><!-- /header -->

<div data-role="content">   
<ul data-role="listview" data-inset="true">
<li><a href="#">
    <img height="100px" src="https://static.webresint.com/images/micro.hostel.com/gallery/34561.jpg">
    <h2>Day Class</h2>
    <p>Broken Bells</p></a>
</li>
<li><a href="#">
    <img src="http://sweetclipart.com/multisite/sweetclipart/files/sunset_hills.png">
    <h2>Evening Class</h2>
    <p>Hot Chip</p></a>
</li>
<li><a href="#">
    <img src="http://www.webweaver.nu/clipart/img/nature/planets/cartoon-moon.png">
    <h2>Night Class</h2>
    <p>Phoenix</p></a>
</li>
</ul>
</div><!-- /content -->

</div><!-- /page -->

</body>
</html>

Upvotes: 0

Views: 274

Answers (1)

Jack
Jack

Reputation: 10993

The problem is that you are using very large images and rescaling them in the browser. The biggest culprit is sunset_hills.png. Here's a jsFiddle with just that image commented out and and you will already notice a huge difference in performance.

Instead of resizing your images using css or img attributes, you should use smaller versions of the images (even better you should try and use css sprites). If you need to support multiple sizes based on the screen size then you can accomplish this by displaying your images using css media queries.

That said I'm not exactly sure why there is such a big difference in performance between chrome and other browsers.

As a side point you are linking to the css for jQuery mobile 1.0.1 but you are using jQuery Mobile 1.3.2. Also JQM 1.3.2 supports jQuery 1.9.1 (while you are linking to jQuery 1.6.4).

Upvotes: 1

Related Questions