在使用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