Q:

Changing background image using jQuery and AJAX

I'm trying to write a code to load asynchronously a background every "N" seconds.
OK! NOW EVERYTHING WORKS! But the first image start after 15 seconds. How to load at the end of page load?
(function(jQuery) {
    window.setInterval(function() {
        jQuery.ajax({
            url: 'http://example.com/background.php',
        }).done(function(data) {
            console.log("done Ok!");
            var newImage = new Image();
            newImage.onload = function() {
                jQuery('body').css({"background-image": data, "color": "red !important"});
                console.log("ok2!");
            };
            newImage.src = data;
        });
    }, 15000);
})(window.jQuery);

QUESTION SOLVED, BUT NOW I NEED how to load in background the background image.
Here the question:
https://stackoverflow.com/questions/25766943/changing-background-image-using-jquery-and-ajax-but-async-and-in-background

A:

Move the looping function out of the window.interval call, as it's own function.
(function(jQuery) {
    function intervalFunc() {
        jQuery.ajax({
            url: 'http://example.com/background.php',
        }).done(function(data) {
            console.log("done Ok!");
            var newImage = new Image();
            newImage.onload = function() {
                jQuery('body').css({"background-image": data, "color": "red !important"});
                console.log("ok2!");
            };
            newImage.src = data;
        });
    }

    window.setInterval(intervalFunc, 15000); // Start the interval timer
    intervalFunc();  // Run once first after page load
})(window.jQuery);

