我想先使用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