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

Popular posts from this blog

html - Sizing a high-res image (~8MB) to display entirely in a small div (circular, diameter 100px) -

java - IntelliJ - No such instance method -

identifier - Is it possible for an html5 document to have two ids? -