我想先使用jquery加载后台，但我的代码没有；似乎不起作用 - I want to load the background first using jquery but my code doesn't seem to work

I want to load the background first using jquery but my code doesn't seem to work

下面是代码。但我不知道问题出在哪里。每次加载后，我都有一组背景图像，它不断变化[这是我的意图]。现在我计划先使用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>

您的路径正确吗？

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

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加载函数：

window.onload = function() {};

您应该这样修改：

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;。

您可以像下面这样简单地使用。

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