Why are images not displayed when using jQuery Mobile with offline cache?

Question

I'm trying to make my jQuery Mobile web app HTML5 offline cache enabled. Not so that it will work offline, but rather to improve the performance of the initial page load for returning users.

I'm very close to have it working as intended, but for some reason my page isn't displaying jQuery Mobile's icon images. This could be fixed by adding NETWORK * to my cache manifest, but I want the images cached.

My cache manifest:

    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

The beginning of my HTML file:

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

I can tell in Fiddler that the image sprite (lib/jquery.mobile-1.1.1/images/icons-18-white.png) is being downloaded properly, but jQuery Mobile apparently can't find and use it. What is the problem here?

pollifax pollifax · Accepted Answer · 2012-10-03T14:52:26

Add the following to your css:

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

Why are images not displayed when using jQuery Mobile with offline cache?

1 Answers