Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Using:</p> <pre><code>$(window).load(function(){ var $p = $('&lt;p&gt;&lt;a href="#"&gt;Refresh&lt;/a&gt;&lt;/p&gt;').appendTo(document.body); $p.find('a').click(function(){ window.location.reload(); return false; }); $('.slides_control img').css('display', "none"); $('.slides_control img').fadeIn(800); }); </code></pre> <p><a href="http://jsfiddle.net/fhF5E/" rel="nofollow">http://jsfiddle.net/fhF5E/</a></p> <p>It does flicker when you click Refresh several times in a row.</p> <p>Using:</p> <pre><code>.slides_control img { display: none; } $(window).load(function(){ var $p = $('&lt;p&gt;&lt;a href="#"&gt;Refresh&lt;/a&gt;&lt;/p&gt;').appendTo(document.body); $p.find('a').click(function(){ window.location.reload(); return false; }); $('.slides_control img').fadeIn(800); }); </code></pre> <p><a href="http://jsfiddle.net/fhF5E/1/" rel="nofollow">http://jsfiddle.net/fhF5E/1/</a></p> <p>I haven't been able to get it to flicker once.</p> <p>Even this doesn't flicker:</p> <pre><code>&lt;div class="slides_control"&gt; &lt;img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=32&amp;d=identicon&amp;r=PG"/&gt; &lt;/div&gt; &lt;script&gt;$('.slides_control img').hide();&lt;/script&gt; $(window).load(function(){ var $p = $('&lt;p&gt;&lt;a href="#"&gt;Refresh&lt;/a&gt;&lt;/p&gt;').appendTo(document.body); $p.find('a').click(function(){ window.location.reload(); return false; }); $('.slides_control img').fadeIn(800); }); </code></pre> <p><a href="http://jsfiddle.net/fhF5E/3/" rel="nofollow">http://jsfiddle.net/fhF5E/3/</a></p> <p><strong>EDIT</strong></p> <p>After reviewing the actual page that demonstrated the problem, it was discovered that the <code>display: none</code> was being applied to the <code>img</code> in such a way that on page load, the <code>display: none</code> selector was not selecting anything, but then <em>was</em> selecting <em>after</em> the slider effect was added (on ready).</p> <p>So...</p> <pre><code>.slides_control img { display: none; } </code></pre> <p>Needs to change to:</p> <pre><code>.slider img { display: none; } </code></pre>
 

Querying!

 
Guidance

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