Question

Iam loading pages in dynamically with PHP like so:

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

If you use the navigation at the top of my site the PHP loads the relevant content.

And i got this script at the bottom of my page to change the background image:

 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();

But everytime different content is loaded, the script is executed…
I don’t want that. I only want to change the background when the user refreshes the page. Not when different content is loaded when the user is navigating through the site.

Answer 1

As it is now (based on your comment), you are reloading the whole page when you really want to load only new content.

To be able to get the effect that you want, you should use ajax (combining php and javascript) to refresh only a part of your page when you hit a navigation link.

What you could do is (using jQuery for an easy introduction to ajax…):

• separate your php script from the html so that you can call it separately and include it in your initial html;
• attach an event handler to your navigation links, cancelling the default action (undo the click) and use jQuery’s load method to replace your content with the new content (call your php script with the correct parameters).

As the javascript is located in the main html file, it will only execute your background script on the initial page load or page refresh.