javascript - 我想先使用 jquery 加载背景,但我的代码似乎不起作用

标签 javascript php jquery css

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

window.onload = function() {};

关于javascript - 我想先使用 jquery 加载背景,但我的代码似乎不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39631031/

相关文章:

javascript - 在引导网格中的第 n 个子项之后插入 div

javascript - EXTJS GRID 和存储

javascript - 错误 : Expected expression, 脚本结束

javascript - 我无法在我的 asp 下拉列表中找到所选值

javascript - 如何将 JavaScript 函数的输出用作 HTML 文本区域框中的字符串?

php - 使用 salesforce api 将联系人与帐户相关联

javascript - 使用ajax从javascript传递数据并将其保存到数据库

javascript - 在我的 React Native 项目中安装 Parse SDK 时,它显示找不到变量 : localStorage error

javascript - 那是缓存还是缓存?

php - 当 session 超时或空闲时自动重定向用户