StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POLoading GIF becomes choppy near end
text
Body
copied!<p>It's a small problem, but one that bugs me none the less. I've got a loading GIF set as a background-image. When the page has loaded all of it's content, the background-image changes to an arrow. Very simple build. </p> <p>Problem is, on the first visit, before anything is cached, the GIF becomes really choppy a couple seconds before the page has finished loading it's content. Anyone know a fix or workaround?</p> <p>I've looked around online but couldn't find anything to do specifically with GIFs becoming choppy in a situation like this. Thanks in advance!</p> <p><a href="http://rocko-design.com/testing3" rel="nofollow">Test-site</a> (temporarily online)</p> <p>HTML</p> <pre><code><a href=".start" id="next"></a> </code></pre> <p>CSS</p> <pre><code>.cbp-af-header a#next { display:block; background-image:url('../images/loading.gif'); background-size:30px 30px; background-repeat:no-repeat; background-position:center; width:400px; margin:0 auto; height:50px; position:absolute; top:550px; left:50%; margin-left:-200px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; cursor:default; } .cbp-af-header a#next:hover { background-color:#000; } .cbp-af-header a.next-ready { background-image:url('../images/raquo-down.png') !important; background-size:19px 13px !important; cursor:pointer !important; } </code></pre> <p>jQuery</p> <pre><code><script type="text/javascript"> $(window).bind("load", function() { $('a#next').addClass('next-ready'); }); </script> </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