Question

我似乎在设置和使用jquery mobile时遇到了一些麻烦。问题是，如果将鼠标悬停在ul中的列表项上，则会在动画中产生很大的延迟，就像在平板电脑上悬停一样。我的页面很简单，几乎完全取自jQuery移动教程。您可以在下面看到代码或访问：aliahealthcare.com/jquerymobile来重现相同的环境。谢谢！

我的代码：

 <!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>

Answer 1

问题是您正在使用非常大的图像并在浏览器中重新缩放它们。最大的罪魁祸首是sunset_hills.png。这是一个jsFiddle，只有这个图像被注释掉了，你已经注意到了性能上的巨大差异。

不应使用css或img属性调整图像大小，而应使用较小版本的图像（更好的是你应该尝试使用css sprites）。如果您需要根据屏幕尺寸支持多种尺寸，则可以使用css media queries显示图片来完成此操作。

那说我不确定为什么Chrome和其他浏览器之间的性能差异很大。

作为一个侧面点，您将链接到jQuery mobile 1.0.1的css，但您正在使用jQuery Mobile 1.3.2。 JQM 1.3.2也支持jQuery 1.9.1（当你链接到jQuery 1.6.4时）。

jQuery移动运行滞后与延迟响应

1 个答案: