我正在使用 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 中，我称之为:-
<body>
<div>
<img id="imageSlide" alt="" src="" />
</div>
</body>
最佳答案
每次切换 <img> 时，页面都会重新布局。源，因为您没有明确设置宽度和高度属性。切换新图像 SRC 时，它将宽度/高度设置为 0x0，然后在图像加载完成后恢复为完整尺寸。
设置明确的宽度和高度，这样它就不会在每次图像切换之间调整图像大小(从而改变布局)。
关于javascript - 在幻灯片中使用 javascript 转换图片时，整个页面都会抖动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7532632/