javascript - CSS Sprites 未在 Android 上显示

Question

我正在使用 jQuery 在几个 div 元素(位于包装 div 内)上动态加载 CSS Sprites。大多数时候这工作正常。然而，一位用户现在告诉我 Sprite 根本没有出现。不幸的是，很难为它创建一个 jsFiddle，因为这通常不会发生。

由于是用PhoneGap Build构建的app，所以使用webkit浏览器来展示app。关于 sprite 和 Android/Webkit 浏览器是否存在任何可能导致此行为的已知问题？

提前致谢!

编辑:当然我可以展示一些代码，为简单起见，我将只使用一个图像-div(获取 Sprite )

<div id="wrapper">
    <div id="image0"></div>
</div>

标记是

#wrapper div[id^="image"] {
    z-index: 10;
}

(不应该做太多)并且 Sprite 被初始化(我编辑了循环条件)

for (<i>) {
    $('#image' + i).css('background-image', 'url(img/myimage.png)')
           .css('background-size', (2*someVar) + 'px')
           .css('background-position', '0 -' + (2*i*someVar) + 'px');
}

另一段代码正确调整了 div 的大小。就像我说的:它在我测试的任何地方都运行良好，但一位用户告诉我他遇到了问题。

Answer 1

问题很可能是 Sprite 对于移动浏览器来说太大而无法使用。按文件大小或分辨率。尝试将 sprite 分成两个文件，看看是否有帮助。

我遇到过类似的问题， Sprite 没有出现在 iOS 上，因为它们太大了。