仅在使用 javascript 刷新时更改背景答案

【问题标题】：Change background only on refresh with javascript仅在使用 javascript 刷新时更改背景
【发布时间】：2012-12-03 17:24:38
【问题描述】：

我正在使用 PHP 动态加载页面，如下所示：

<div id="content">
<div id="fadein">   


<?php
    /// load page content
    $pages_dir = 'content';

    if(!empty($_GET['p'])) {

        $pages = scandir($pages_dir, 0);
        //delete . and ..
        unset($pages[0], $pages[1]);

        $p = $_GET['p'];

        // only files that are in the array can be loaded
        if (in_array($p. '.php', $pages)) {
            include($pages_dir. '/'.$p. '.php');    

        } else {
            echo 'Helaas deze pagina bestaat niet';
        }
    } else {
        include($pages_dir. '/index.php');
    }

?>  


</div>
</div>

如果您使用我网站顶部的导航，PHP 会加载相关内容。

我在页面底部找到了这个脚本来更改背景图片：

 function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:
preload([
    '../public/background/test2/1.jpg',
    '../public/background/test2/2.jpg',
    '../public/background/test2/3.jpg',
    '../public/background/test2/4.jpg',
    '../public/background/test2/5.jpg',
    '../public/background/test2/6.jpg'

]);

var totalCount = 6;
function changeBackground()
{
    var num = Math.ceil( Math.random() * totalCount );
    backgroundUrl = '../public/background/test2/'+num+'.jpg';

    $('body').css('background-image', 'url('  +backgroundUrl+  ')');
}

changeBackground();

但是每次加载不同的内容时，都会执行脚本... 我不想那样。我只想在用户刷新页面时更改背景。当用户浏览网站时加载不同的内容时不会。

【问题讨论】：

您如何使用 ajax 更改内容？如果不是，则重新加载页面和在不同链接之间导航没有区别。
我正在使用 PHP 更改内容。我以为只有 div 中的内容被重新加载，而页面的其余部分保持不变？

标签： php javascript refresh background-image

【解决方案1】：

现在（根据您的评论），当您真的只想加载新内容时，您正在重新加载整个页面。

为了能够得到你想要的效果，你应该使用ajax（结合php和javascript）在你点击导航链接时只刷新页面的一部分。

您可以做的是（使用 jQuery 轻松介绍 ajax...）：

将你的php脚本和html分开，这样你就可以单独调用它，并将它包含在你的初始html中；
将事件处理程序附加到您的导航链接，取消默认操作（撤消单击）并使用 jQuery 的 load 方法将您的内容替换为新内容（使用正确的参数）。

由于 javascript 位于主 html 文件中，它只会在初始页面加载或页面刷新时执行您的后台脚本。

【讨论】：

【解决方案2】：

如果您尝试仅通过 JavaScript 进行管理，那么您可以创建一个包含页面访问数组的 Cookie，然后在页面加载时您可以参考该数组来确定用户是否已经访问过该页面。

【讨论】：