Home/ Questions/Q 6616191
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T20:33:11+00:00

I am using javascript to display a slideshow on my JSP. In slideshow the

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0