通过jQuery随机背景图像答案

【问题标题】：Random background image through jQuery通过jQuery随机背景图像
【发布时间】：2014-08-05 11:33:03
【问题描述】：

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

这是我的代码的 sn-p：

在我的 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>

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

【问题讨论】：

你能不能做一个console.log来检查路径是否正确生成。
同时添加您的 HTML
我刚刚做了一个并且路径正确生成，每次选择的背景图像都是随机的，但模拟器中仍然没有显示任何内容......
@emilywhou 检查您的网络面板，确保图像加载正确并且没有 404 错误。内联 CSS 的路径是相对于 HTML 文档的。
所以我 console.log 我的 url 路径，这是正确的，但是当我 console.log 使用 jQuery 的 background-image 的 css 属性时，什么都没有显示。似乎 jQuery 未能设置 css 属性...有什么建议吗？

标签： javascript jquery css angularjs cordova

【解决方案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 错误。相同的行可以毫无问题地在所有其他平台上运行。

【讨论】：