Question

我需要预先加载要为我的网络应用程序设置背景的图像。我已尝试使用普通的CSS和普通的javascript和css与javascript.they都可以正常使用桌面浏览器和iPad Safari。但不是在chrome.the背景在加载的第一次闪烁，然后它很好。任何方法摆脱iPad铬闪烁？

body {
    background: url("http://placekitten.com/g/200/300") no-repeat center center fixed;
    background-color:#f5f5f5;
    height:100%;
    width:100%;
    padding:0px;
    margin:0px;
}
.switchBg {
    background: url("http://placekitten.com/g/200/331") no-repeat center center fixed;
    background-size  : 100% 100% ;
}
body:after{
    display:none;
    content: url("http://placekitten.com/g/200/300") url("http://placekitten.com/g/200/331");
}

这里是jsfiddle

Answer 1

通常您希望图像在显示之前完全加载，它可能仅部分加载，因此闪烁。

您可以通过从Image实例中侦听.onload事件来等待加载图像。

image = new Image()

image.onload = function(){
  $("body").addClass("switchBg");
}

image.src = "http://placekitten.com/g/200/331";

希望这有帮助。

jsfiddle http://jsfiddle.net/uh3jbws5/2/

如何为iPad Chrome浏览器预加载图像？

1 个答案: