在使用javascript进行幻灯片放映中的图片过渡时，整个页面都会晃动

Question

我正在使用javascript在JSP上显示幻灯片。 在幻灯片播放中，图片每3秒淡入和淡出一次。 在图片的每个过渡上，整个jsp都会抖动。 我也将图片裁切成相同大小，并且加载起来并不那么重。

我的JavaScript代码是：-

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

然后在体内我就这样称呼：-

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

Answer 1

每次切换<img>源时，由于没有显式设置width和height属性，因此页面将重新排列布局。 切换新图像SRC时，它将宽度/高度设置为0x0，然后在图像加载完成后恢复为完整尺寸。

设置一个明确的宽度和高度，这样它就不会在每个图像开关之间调整图像大小（从而更改布局）。

在使用javascript进行幻灯片放映中的图片过渡时，整个页面都会晃动

问题描述

1 个解决方案

解决方案1
0 已采纳 2011-09-23 18:09:12

在使用javascript进行幻灯片放映中的图片过渡时，整个页面都会晃动

问题描述

1 个解决方案

解决方案1 0 已采纳 2011-09-23 18:09:12

解决方案1
0 已采纳 2011-09-23 18:09:12