使用javascript在幻灯片中转换图片时，整个页面都会抖动
我正在使用 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>
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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（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.