StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POUsing jQuery to preload images so there is no blink
text
Body
copied!<p>I'm trying to fade between two images with jQuery. When I did this the first time there was a blink when the images cross faded the first time. So I tried to preload the images before the fade takes places. However the there is still a blink. Below is a simplified example of the code that still has the blink even with the preloaded images (you should be able to copy and paste it in and have it 'just work' to see the issue). How do I make it so that there is no blink? Thank you!</p> <pre><code><html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ function preload(arrayOfImages) { var temp = $('<img>') temp.attr("src", "http://www.colorcombos.com/images/colors/hex-codes/FF9900.png") $('#myGallery').prepend(temp) var temp = $('<img>') temp.attr("src", "http://www.colorcombos.com/images/colors/hex-codes/003366.png") temp.attr("class", "active") $('#myGallery').prepend(temp) $(arrayOfImages).each(function(){ }); } preload(); $('#switch').click(function(){ swapImages() }); function swapImages(){ var $active = $('#myGallery .active'); var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first'); $active.fadeOut("fast") $active.removeClass('active') $next.fadeIn("fast").addClass('active'); } }); </script> <style> #myGallery{ position:relative; width:100px; height:100px; } #myGallery img{ display:none; position:absolute; top:0; left:0; } #myGallery img.active{ display:block; } </style> </head> <body> <div id="myGallery"></div> <input type=button id=switch value=switch> </body> </html> </code></pre> <h1>Edit</h1> <p>I did the suggestion of adding </p> <pre><code> var img1 = new Image(); img1.src = "http://www.colorcombos.com/images/colors/hex-codes/003366.png"; var img2 = new Image(); img2.src = "http://www.colorcombos.com/images/colors/hex-codes/FF9900.png" </code></pre> <p>at the top. However, the first time the fade is done, it still goes from orange to white to blue, instead of orange to blue. The next time the transition is much better with blue to orange and if you click again orange to blue with no brief moment of white.</p> <pre><code><html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript"> var img1 = new Image(); img1.src = "http://www.colorcombos.com/images/colors/hex-codes/003366.png"; var img2 = new Image(); img2.src = "http://www.colorcombos.com/images/colors/hex-codes/FF9900.png" $(document).ready(function(){ var temp = $(img1) $('#myGallery').prepend(temp) var temp = $(img2) temp.attr("class", "active") $('#myGallery').prepend(temp) $('#switch').click(function(){ swapImages() }); function swapImages(){ var $active = $('#myGallery .active'); var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first'); $active.fadeOut("fast") $next.fadeIn("fast").addClass('active'); $active.removeClass('active') } }); </script> <style> #myGallery{ position:relative; width:100px; height:100px; } #myGallery img{ display:none; position:absolute; top:0; left:0; } #myGallery img.active{ display:block; } </style> </head> <body> <div id="myGallery"> </div> <input type=button id=switch value=switch> </body> </html> </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