On transition of pictures in slideshow using javascript the whole page shakes

Question

I am using javascript to display a slideshow on my JSP. In slideshow the picture fadein and fadeout every 3sec. On every transition of a picture the whole jsp shakes. I have also cropped the pictures to same size and are not that heavy to load.

my javascript code is:-

<script type="text/javascript">
        var imgs = [
        'images/tern.jpg',
        'images/airplane.JPG',
        'images/sf_night.jpg',
        'images/aerial.jpg',
        'images/airbusa380.jpg'];
        var cnt = imgs.length;

        $(function () {
            setInterval(Slider, 3000);
            var $imageSlide = $('img[id$=imageSlide]');
            // set the image control to the last image
            $imageSlide.attr('src', imgs[cnt - 1]);
        });
        function Slider() {
            $('#imageSlide').fadeOut("slow", function () {
                $(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn("slow");
            });
        }
</script>

then in the body i just call this:-

<body>
<div>
<img id="imageSlide" alt="" src="" />
</div>
</body>

Answer 1

The page is re-flowing the layout every time you switch the <img> source since you do not explicitly set the width and height attributes. When the new image SRC is switched, it sets the width/height to 0x0, and then back to the full size once the image finishes loading.

Set an explicit width and height so it doesn't adjust the image size (thus changing the layout) between each image switch.

On transition of pictures in slideshow using javascript the whole page shakes

Question

1 answers

solution1
0 ACCPTED 2011-09-23 18:09:12

On transition of pictures in slideshow using javascript the whole page shakes

Question

1 answers

solution1 0 ACCPTED 2011-09-23 18:09:12

solution1
0 ACCPTED 2011-09-23 18:09:12