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

Question

我需要预加载要为我的 Web 应用程序设置背景的图像。我已经尝试使用纯 css 和纯 javascript 以及带有 javascript 的 css。它们都可以在桌面浏览器和 iPad Safari 上正常工作。但在 chrome 中不行.背景在第一次加载时闪烁，然后就可以了。有什么办法可以消除 iPad chrome 中的闪烁？

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/