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

可能由多种原因引起：

您正在测试哪些设备/操作系统？较旧的Webkit / webview可能不支持background-size: cover;
您是否在.front-page

height: 100%; width: 100%

这些.png文件的文件大小和分辨率是多少？较高分辨率的图像会降低性能。

除此之外，我们在Android 4.0.2到4.3上有过PhoneGap的经验，其中background-images随机无法呈现。 10页中的1页加载将无法显示背景图像。并且没有可见的解释，没有控制台错误，没有CSS错误。相同的行可以在所有其他平台上运行，没有任何问题。

随机背景图像通过jQuery

1 个答案: