html - JQM 1.4 svg 和 png 图标离线应用程序的噩梦。有捷径吗？

Question

您可能知道 JQM 1.4.1。现在包括两组图标:PNG 和 SVG。在以前的版本中，所有图标都包含在单个文件中(例如:icons-18-black.png)，将其包含在 HTML5 list 中以供缓存和离线使用既简单又简短。

我的问题是:

我应该声明我的 html5 缓存 list 中提供的每个图标吗？包括 PNG 和 SVG？

如果我只声明 PNG 会怎么样？我的 JQM 离线应用程序是否仍然可以工作，或者会因为找不到 SVG 而崩溃？

如果是这样，只要满足以下条件，我的 HTML5 list 就会增长:

http://www.MySite/tablet/jquery/mobile_141/images/icons-png/action-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/action-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/alert-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/alert-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/arrow-d-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/arrow-d-l-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/arrow-d-l-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/arrow-d-r-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/arrow-d-r-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/arrow-d-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/arrow-l-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/arrow-l-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/arrow-r-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/arrow-r-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/arrow-u-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/arrow-u-l-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/arrow-u-l-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/arrow-u-r-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/arrow-u-r-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/arrow-u-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/audio-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/audio-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/back-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/back-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/bars-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/bars-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/bullets-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/bullets-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/calendar-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/calendar-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/camera-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/camera-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/carat-d-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/carat-d-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/carat-l-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/carat-l-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/carat-r-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/carat-r-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/carat-u-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/carat-u-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/check-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/check-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/clock-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/clock-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/cloud-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/cloud-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/comment-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/comment-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/delete-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/delete-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/edit-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/edit-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/eye-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/eye-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/forbidden-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/forbidden-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/forward-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/forward-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/gear-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/gear-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/grid-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/grid-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/heart-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/heart-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/home-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/home-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/info-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/info-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/location-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/location-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/lock-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/lock-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/mail-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/mail-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/minus-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/minus-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/navigation-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/navigation-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/phone-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/phone-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/plus-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/plus-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/power-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/power-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/recycle-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/recycle-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/refresh-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/refresh-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/search-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/search-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/shop-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/shop-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/star-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/star-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/tag-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/tag-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/user-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/user-white.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/video-black.png
http://www.MySite/tablet/jquery/mobile_141/images/icons-png/video-white.png

重复 SVG....... :(

http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/action-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/action-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/alert-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/alert-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/arrow-d-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/arrow-d-l-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/arrow-d-l-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/arrow-d-r-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/arrow-d-r-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/arrow-d-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/arrow-l-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/arrow-l-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/arrow-r-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/arrow-r-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/arrow-u-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/arrow-u-l-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/arrow-u-l-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/arrow-u-r-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/arrow-u-r-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/arrow-u-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/audio-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/audio-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/back-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/back-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/bars-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/bars-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/bullets-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/bullets-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/calendar-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/calendar-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/camera-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/camera-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/carat-d-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/carat-d-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/carat-l-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/carat-l-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/carat-r-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/carat-r-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/carat-u-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/carat-u-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/check-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/check-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/clock-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/clock-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/cloud-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/cloud-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/comment-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/comment-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/delete-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/delete-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/edit-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/edit-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/eye-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/eye-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/forbidden-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/forbidden-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/forward-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/forward-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/gear-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/gear-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/grid-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/grid-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/heart-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/heart-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/home-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/home-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/info-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/info-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/location-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/location-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/lock-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/lock-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/mail-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/mail-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/minus-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/minus-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/navigation-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/navigation-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/phone-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/phone-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/plus-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/plus-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/power-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/power-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/recycle-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/recycle-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/refresh-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/refresh-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/search-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/search-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/shop-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/shop-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/star-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/star-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/tag-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/tag-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/user-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/user-white.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/video-black.svg
http://www.MySite/tablet/jquery/mobile_141/images/icons-svg/video-white.svg

如果是的话。我的离线应用程序将这些文件传输到 Sansung Galaxy 3 时延迟超过 1 分钟。

这对我的用户来说太长了!!!

Answer 1

我遇到了和你一样的问题。事实证明，这些 svg 图像并未实际使用，您不需要包含它们。 svg 图像在 css 文件中内联编码。

出于我的目的，我只需要支持支持内联 svg 的浏览器，因此我不需要在我的 list 中包含 png 文件或 svg 文件。对内联 svg 的支持非常好:http://caniuse.com/svg-html5

所以也许你也可以摆脱这个。

这整个有点令人困惑的场景在这个 link 的帖子中得到了很好的总结。但我已将相关部分复制并粘贴到此处以便于引用。

The standard jquery.mobile.icons-1.4.0.css includes the SVG icons internally in the CSS file, but references the images directory for the PNG files.

• jquery.mobile-1.4.0.css is just the concatenation of the standard Icon, Theme, and Structure CSS files.

• jquery.mobile.external-png-1.4.0.css is a combined file that references PNG files from the images directory. It doesn't use SVG icons at all.

• jquery.mobile.inline-png-1.4.0.css is a combined file that includes the PNG icons internally in the CSS file. It does not need the images directory. It also doesn't use SVG icons at all.

• jquery.mobile.inline-svg-1.4.0.css is a combined file that includes the SVG icons internally in the CSS file. It doesn't use PNG icons at all.

• Other combinations are possible, either by loading CSS parts separately, or doing a simple concatenation yourself. It's a matter of deciding if you want to support SVG, PNG, or both (fallback to PNG when SVG not supported by browser) and whether you want to include images inline in the CSS file itself or reference them from the images directory.

• The default combo file makes the most sense in most cases. The SVG icons are loaded inline within the CSS file. These are the icons that are used by most browsers. If the user has a browser that doesn't support SVG, then they've wastefully downloaded unneeded bytes in the CSS file. But this will affect only a very small number of users. In that case, PNG icons will be loaded from the images directory. It wouldn't make sense to burden the vast majority of users by needlessly including the PNG icons inline within the CSS file.

• Interestingly although the individual SVG icons are included in images/svg, there is no supplied CSS that references them.