我在 chrome 中加载图像时遇到问题,它在 safari 和 firefox 中看起来不错,但在 chrome 中我看到的是两个半加载图像而不是一个完整图像。我不确定如何解决此问题,我们将不胜感激。
HTML:
<div class="execute-actions">
<div class="loading"></div>
</div>
CSS:
.loading {
position: relative;
background: url("../../assets/img/core/loading.gif");
background-position: 912px 0px;
width: 48px;
height: 48px;
}
引用加载动画的 JS 部分:
$(window).ready(function () {
if ($("html[data-useragent*='MSIE 8']").length) {
if ($("div.loading")) {
setInterval(function () {
$("div.loading").css({"background-position-x": "-=48px" });
}, 35);
}
} else {
if ($("div.loading")) {
setInterval(function () {
$("div.loading").css({"background-position": "-=48px" });
}, 35);
}
}
最佳答案
在动画运行时检查 .loading div 上的 CSS 样式。您可能会看到 x 轴和 y 轴都被覆盖了。没有 fiddle 就不能说更多,但 chrome 可能会将 background-position-y 设置为 50%。所以也许你也应该在 chrome 中使用 'background-position-x' :)
关于javascript - Chrome 显示加载 gif 的方式与 Safari 和 Firefox 不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19298612/