javascript - 通过 jQuery 随机背景图片

Question

我试图在每次用户加载页面时更新 phonegap 应用程序的背景图像。背景图片的选择是随机的……然而，图片根本没有加载。我想知道这是否是 Angular 和 jQuery 的问题？我目前正在应用程序中实现 Cordova、AngularJS(和 Ionic)和 jQuery。

这是我的代码片段:

在我的 index.html 的标题中:

$(document).ready(function() {
        var images = ['background.png', 'background2.png', 'background3.png', 'background4.png', 'background5.png', 'background6.png'];
        $(".front-page").css({'background-image': 'url(img/' + images[Math.floor(Math.random()*images.length)] + ')'});
    });

我单独的 style.css 中的 .front-page 类:

.front-page {
    background-position: center;
    background-size: cover;
}

然后应用于应用程序的首页:

<script id="main.html" type="text/ng-template">
<ion-view hide-nav-bar="true" class="front-page">
    <ion-content scroll="false">
        ...
    </ion-content>
</ion-view>
</script>

路径和图像名称都正确，但背景显示为空白。提前致谢!

Answer 1

可能由多种原因引起:

1. 您使用什么设备/操作系统进行测试？较旧的 Webkit/webview 可能不支持 background-size: cover;
2. 您是否指定了容器类 .front-page 的大小，如 height: 100%;宽度:100%
3. 这些 .png 文件的文件大小和分辨率是多少？高分辨率图像会降低性能。

除此之外，我们过去曾在 Android 4.0.2 到 4.3 上使用 PhoneGap，其中 background-images 会随机无法呈现。 10 个页面加载中有 1 个无法显示背景图像。并且没有可见的解释，没有控制台错误，没有 CSS 错误。同样的代码可以毫无问题地在所有其他平台上运行。