javascript - jQuery loading empty image first in slideshow -
okay, everyone, total noob @ jquery, i'm learning, , i've tried research , implement simple slideshow. looks thus:
<script type="text/javascript"> var imgs = [ '../images/slideshow/01.jpg', '../images/slideshow/02.jpg', '../images/slideshow/03.jpg', '../images/slideshow/04.jpg', '../images/slideshow/05.jpg', '../images/slideshow/06.jpg', '../images/slideshow/07.jpg']; var cnt = imgs.length; $(function () { setinterval(slider, 3000); }); function slider() { $('#imageslide').fadeout(3000, function () { $(this).attr('src', imgs[(imgs.length++) % cnt]).fadein(2000); }); } </script>
and have in body down yonder:
<img id="imageslide" alt="" src="" height="450" width="450" border="0" />
it runs alright purposes, it's kind of irksome starts out big empty blank square image box several seconds before proceeding slide show. there simple way fix this?
<img id="imageslide" alt="" src='../images/slideshow/01.jpg' height="450" width="450" border="0" />
now put source of first image last 1 in array follows
<script type="text/javascript"> var imgs = [ '../images/slideshow/02.jpg', '../images/slideshow/03.jpg', '../images/slideshow/04.jpg', '../images/slideshow/05.jpg', '../images/slideshow/06.jpg', '../images/slideshow/07.jpg', '../images/slideshow/01.jpg']; var cnt = imgs.length; $(function () { setinterval(slider, 3000); }); function slider() { $('#imageslide').fadeout(3000, function () { $(this).attr('src', imgs[(imgs.length++) % cnt]).fadein(2000); }); } </script>
Comments
Post a Comment