Databases
StackOverflow2013
Postsdbo
POJQuery - Background image rotation issues in Chrome (works only after F5 refresh). No problems in FF, Safari, IE
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery - Background image rotation issues in Chrome (works only after F5 refresh). No problems in FF, Safari, IE
    text
    copied!<p>here's a description of the issue I'm having:</p> <p>The following script will rotate through five background image every 10 seconds; it works perfectly in IE, FF, and Safari - but in Chrome, the background image will only rotate <strong>once</strong>, and no further images are rotated, unless I refresh the browser via F5. Then all images are rotated on the expected interval, and all is right with the universe.</p> <p>I've been pounding my brain on this one: for the rotation function, I've switched between <em>setTimeout</em> / <em>setInterval</em>, and for image-preloading good measure, I've swapped between <em>$(window).load(function()</em> / <em>$(document).ready(function()</em>, but nothing seems to do the trick - I always have to refresh Chrome in order for more than one image rotation to occur. Just to reiterate, Chrome <em>will</em> flip to the first image after the initial 10 seconds once the page loads, but after that, radio silence - no other images are rotated, unless the page is refreshed.</p> <p>I'm using JQuery v1.6.2, and Chrome 13.0.782.112</p> <p>Here's the code, I've included the javascript, the HTML to load it, and the associated CSS for good measure.</p> <p>Any insight would be greatly appreciated!</p> <p><em><strong>rotateBg.js</em></strong> (first create an array of the images paths, then preload, then rotate)</p> <pre><code> $(window).load(function(){ var imgArr = new Array( // relative paths of images './images/bg_neon.jpg', './images/bg_trees.jpg', './images/bg_dancing.jpg', './images/bg.jpg' ); var preloadArr = new Array(); var i; /* preload images */ for(i=0; i &lt; imgArr.length; i++){ preloadArr[i] = new Image(); preloadArr[i].src = imgArr[i]; } var currImg = 1; var intID = setTimeout(changeImg, 10000); /* image rotator */ function changeImg(){ $('.bg_image').animate({opacity: 0}, 1000, function(){ $(".bg_image").attr('src',preloadArr[currImg++%preloadArr.length].src); }).animate({opacity: 1}, 1000); } }); </code></pre> <p><em><strong>index.html</em></strong></p> <pre><code> &lt;head&gt; &lt;link rel="stylesheet" media="screen" type="text/css" href="./styles/home.css"&gt; &lt;script type="text/javascript" src="./scripts/jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="./scripts/rotateBg.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;img class="bg_image" src="./images/bg.jpg"/&gt; &lt;/body&gt; </code></pre> <p><em><strong>home.css</em></strong> (this is just used to keep the background proportional given screen resizing) </p> <pre><code>img.bg_image { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; z-index:-1; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px){ img.bg_image { left: 50%; margin-left: -512px; } } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload