使用带有脱机缓存的jQuery Mobile时,为什么不显示图像?

时间:2012-08-27 18:32:10

标签: jquery image caching mobile offline

我正在尝试启用jQuery Mobile网络应用HTML5离线缓存。不是这样它会脱机工作,而是为了提高返回用户的初始页面加载的性能。

我非常接近按预期工作,但出于某种原因,我的页面没有显示jQuery Mobile的图标图像。这可以通过将NETWORK *添加到我的缓存清单来修复,但我希望缓存图像。

我的缓存清单:

    CACHE MANIFEST
# rev15
myicon.ico
index_uncompressed.htm
lib/jquery.mobile-1.1.1/jquery.mobile-1.1.1.min.css
lib/jquery.validate-min.js
lib/jquery.mobile.simpledialog2.min.js
/anderswebservice/jquery/lib/jquery-1.7.1.min.js
lib/jquery.mobile-1.1.1/jquery.mobile-1.1.1.min.js
apple-touch-icon-precomposed.png
lib/jquery.mobile-1.1.1/images/icons-18-white.png
lib/jquery.mobile-1.1.1/images/ajax-loader.gifode here

我的HTML文件的开头:

<!DOCTYPE html> 
<html lang='da' manifest="kiosk.manifest"> 
    <head> 
        <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
        <title>NSF kiosk</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1" /> 

        <!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />-->
        <link rel="stylesheet" href="lib/jquery.mobile-1.1.1/jquery.mobile-1.1.1.min.css" />
        <link rel="stylesheet" type="text/css" href="lib/jquery.mobile.simpledialog.min.css" />
        <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"/>
        <link rel="shortcut icon" href="myicon.ico" />

        <!--<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>-->
        <script src="/anderswebservice/jquery/lib/jquery-1.7.1.min.js"></script>
        <!--<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>-->
        <script src="lib/jquery.mobile-1.1.1/jquery.mobile-1.1.1.min.js"></script>

        <script type="text/javascript" src="lib/jquery.validate-min.js"></script>
        <script type="text/javascript" src="lib/jquery.mobile.simpledialog2.min.js"></script>

我可以告诉Fiddler正在正确下载图像精灵(lib / jquery.mobile-1.1.1 / images / icons-18-white.png),但jQuery Mobile显然无法找到并使用它。这有什么问题?

1 个答案:

答案 0 :(得分:0)

将以下内容添加到您的css:

.ui-icon {
    background-image: url(images/icons-18-white.png);
}