我想先使用jquery加载后台，但我的代码似乎不起作用

Question

下面是代码。 但我不知道问题是什么。 每次加载后我都会有一系列背景图像不断改变[这是我的意图]。 现在我计划首先使用javascript加载后台，但我的代码不起作用，虽然它适用于常规样式标记。 我不知道这里有什么问题。 下面是代码。

以下代码有效，但需要时间来加载图像

<?php
  $bg = array('login_bg.jpg', 'login_bg2.jpg', 'login_bg3.jpg', 'login_bg4.jpg', 'login_bg5.jpg', 'login_bg6.jpg', 'login_bg7.jpg', 'login_bg8.jpg', 'login_bg9.jpg' ); // array of filenames

  $i = rand(0, count($bg)-1); // generate random number size of the array
  $selectedBg = $bg[$i]; // set variable equal to which random filename was chosen
?>



<style>

    body{
    background-image:url("<?php echo $base_url; ?>assets/images/<?php echo $selectedBg; ?>");
    }

    </style>

此代码不起作用。 我这样做是因为我想首先加载BG。

<?php
  $bg = array('login_bg.jpg', 'login_bg2.jpg', 'login_bg3.jpg', 'login_bg4.jpg', 'login_bg5.jpg', 'login_bg6.jpg', 'login_bg7.jpg', 'login_bg8.jpg', 'login_bg9.jpg' ); // array of filenames

  $i = rand(0, count($bg)-1); // generate random number size of the array
  $selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>

<script>
    var img1 = new Image();

    img1.src="<?php echo $base_url; ?>assets/images/<?php echo $selectedBg; ?>";


    $('body').css('background-image', 'url('+ img1.src + ')');

</script>

Answer 1

你的路径是否正确？

在我的例子中，这将是这样的：

http://localhost/test/assets/images/login_bg.jpg

从这个文件调用：

http://localhost/test/index.php

编辑和接受的答案：

您的JS / jQuery比您的站点更快。 尝试使用$( document ).ready(function() {

$( document ).ready(function() {
    $('body').css('background-image', 'url('+ img1.src + ')');
});

为什么？

因为您的网站将从上到下呈现。 如果你有JS / jQuery会在你的HTML中添加一些东西，但HTML还没有渲染，它就不会添加东西，因为jQuery找不到你想要操作的项目。

这就是为什么你应该在HTML文件的底部包含一个JS文件。

但是如果你直接将它添加到<head> ，你必须使用$( document ).ready(function() {以确保你的JS / jQuery能够正常工作。

可能的替代方案是标准的JS onload函数：

window.onload = function() {};

Answer 2

你应该像这样修改：

PHP：它应该像$selectedBg = $bg[$i]; 而不是"$bg[$i];"

<?php
  $bg = array('login_bg.jpg', 'login_bg2.jpg', 'login_bg3.jpg', 'login_bg4.jpg', 'login_bg5.jpg', 'login_bg6.jpg', 'login_bg7.jpg', 'login_bg8.jpg', 'login_bg9.jpg' ); // array of filenames

  $i = rand(0, count($bg)-1); // generate random number size of the array
  $selectedBg = $bg[$i]; // set variable equal to which random filename was chosen
?>

HTML：

您还需要添加body标签才能使其正常工作。

<body>
<script src="jquery.min.js"></script>
<script>
    var img1 = new Image();

    img1.src="<?php echo $base_url; ?>assets/images/<?php echo $selectedBg; ?>";


    $('body').css('background-image', 'url('+ img1.src + ')');

</script>
</body>

另一件事：确保$base_url; 被宣布。

Answer 3

你可以简单地使用如下。

<script>

    $('body').css('background-image', 'url(<?php echo $base_url; ?>assets/images/<?php echo $selectedBg; ?>)');

</script>

我想先使用jquery加载后台，但我的代码似乎不起作用

问题描述

3 个解决方案

解决方案1
2 已采纳 2016-09-22 05:52:26

为什么？

解决方案2
1 2016-09-22 06:04:34

解决方案3
0 2016-09-22 05:56:29

我想先使用jquery加载后台，但我的代码似乎不起作用

问题描述

3 个解决方案

解决方案1 2 已采纳 2016-09-22 05:52:26

为什么？

解决方案2 1 2016-09-22 06:04:34

解决方案3 0 2016-09-22 05:56:29

解决方案1
2 已采纳 2016-09-22 05:52:26

解决方案2
1 2016-09-22 06:04:34

解决方案3
0 2016-09-22 05:56:29