I'm starting to feel frustrated with this situation... I have a solution where the CSS background is coming from a webservice. Currently, the system refreshes the entire page using HTML:
<meta http-equiv="refresh" content="300" />
...
body {
background: url('/wallspace/getfile.php?width=gt:1919&height=lt:1700') #1D1F21 top left no-repeat;
background-size: cover;
background-attachment: fixed;
}
Although this method works, it causes a full page refresh, which can be disruptive for users. I would prefer to handle this task in JavaScript for a smoother transition without the flickering every few seconds.
I am struggling to understand why the SetInterval function is not functioning as expected
$(window).load(function() {
var path=encodeURI('/wallspace/getfile.php?width=gt:1919&height=lt:1700');
$("body").css("background", "url('default-bg.png')");
setInterval(function(){ callback() }, 5000);
function callback() {
// The alert confirms that callback is being triggered
//alert("here");
// However, this only changes the background image the first time -- could there be caching?
$('body').css('background', "url('" + path + "')");
}
});
In essence, the callback function is called at the specified interval but does not update the background element. Running an alert verifies that the function is indeed triggered.
The webservice URL fetches a random image based on the querystring it receives in the GET request, yet it appears that JQuery is fetching the image only once and then caching it because the background image changes initially but never again unless the page is completely refreshed.