问题
After fixing CSS background-image style formatting to get better compatibility with Firefox and IE, I found that Chrome intermittingly loses the background images when you scroll up and down on the page. It happens not all the time but still so frequent that users will notice that you sometimes loose the background on your side panels and bottom panels.
Being a javascript novice, I started to create something very simple in order to fix the website located at: http://greencoconut.nl/over/
When searching for this problem I found that also others have struggled with this and when trying to fix this. Knowing that I must refresh the image backgrounds I have writen some code.
Here is the javascript for two divs by ID but it will not load with setInterval events:
/** trying to fix bug with backgrounds
* source http://blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/
*/
jQuery(document).ready(function() {
divObj = document.getElementById('recent-posts-2');
strLink = "url('" + "http://greencoconut.nl/wp/wp-content/themes/origami-paper/images/planken-widget-achtergrond.jpg" + "')";
if (/chrome/.test(navigator.userAgent.toLowerCase())) {
setInterval(function() {
divObj.style.backgroundImage = strLink
}, 3000);
}
});
jQuery(document).ready(function() {
divObj = document.getElementById('tag_cloud-2');
strLink = "url('" + "http://greencoconut.nl/wp/wp-content/themes/origami-paper/images/planken-widget-achtergrond.jpg" + "')";
if (/chrome/.test(navigator.userAgent.toLowerCase())) {
setInterval(function() {
divObj.style.backgroundImage = strLink
}, 3000);
}
});
The variables seem to work properly but the interval functions do not start. I also tried it with just one but that does not help either. It is probably something simple but I have trouble finding it. I tried this with and without variables but it does not start the interval function.
来源：https://stackoverflow.com/questions/21588657/reload-backgrounds-to-fix-bug-with-chrome