jquery-1.4.2.js show image on slider once image has loaded
<p>Hi have been through tons and tons of threads regarding this but I cannot seem to get my head around it. I know this has been asked many of times in regards to the nivo silder but I do not use that. and I do not understand this jquery language</p>

<p>this is my code on my homepage (on magento) to run the slider.</p>

<p>What I want is the images to only show once the page has fully loaded. Many Thanks In Advance.</p>

<pre><code>&lt;script type="text/javascript" src="{{skin url='js/jquery-1.4.2.js'}}"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="{{skin url='js/coin-slider.min.js'}}"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;// &lt;![CDATA[
    var $j = jQuery.noConflict(); 
    $j(document).ready(function(){
        $j('#coin-slider').coinslider({
            width: 1022, // width of slider panel
            height: 383, // height of slider panel
            spw: 7, // squares per width
            sph: 5, // squares per height
            delay: 8000, // delay between images in ms
            sDelay: 30, // delay beetwen squares in ms
            opacity: 0.7, // opacity of title and navigation
            titleSpeed: 500, // speed of title appereance in ms
            effect: 'straight', // random, swirl, rain, straight
            navigation: true, // prev next and buttons
            links : true, // show images as links
            hoverPause: true // pause on hover
        });
    });
// ]]&gt;&lt;/script&gt;
&lt;div id="coin-slider"&gt;&lt;a href="#"&gt; &lt;img src="{{skin url='images/banner.png'}}" alt="" width="1022" height="383" /&gt;&lt;/a&gt;&lt;a href="#"&gt; &lt;img src="{{skin url='images/banner2.png'}}" alt="" width="1022" height="383" /&gt;&lt;/a&gt;&lt;a href="#"&gt; &lt;img src="{{skin url='images/banner3.png'}}" alt="" width="1022" height="383" /&gt;&lt;/a&gt;&lt;/div&gt;
</code></pre>
