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

编辑＆amp;接受的答案：

您的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 个答案:

为什么？