0

我似乎在设置和使用 jquery mobile 时遇到了一些麻烦。问题是，如果您将鼠标悬停在 a 中的列表项上，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>
4

1 回答 1

1

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

与其使用 css 或 img 属性调整图像大小，不如使用较小版本的图像（更好的是，您应该尝试使用css sprites）。如果您需要根据屏幕尺寸支持多种尺寸，那么您可以通过使用css 媒体查询显示图像来完成此操作。

也就是说，我不确定为什么 chrome 和其他浏览器之间的性能差异如此之大。

另外，您正在链接到 jQuery Mobile 1.0.1 的 CSS，但您使用的是 jQuery Mobile 1.3.2。JQM 1.3.2 还支持 jQuery 1.9.1（当您链接到 jQuery 1.6.4 时）。

于 2013-08-12T03:09:39.827 回答