更改图像的 src 属性时，jQuery 动画会产生断断续续的过渡答案

【问题标题】：jQuery animations give choppy transitions when changing the src attribute of an image更改图像的 src 属性时，jQuery 动画会产生断断续续的过渡
【发布时间】：2022-04-10 18:19:02
【问题描述】：

我一直在使用$().hide 和$().show 以类似幻灯片的方式在图像之间进行平滑过渡。例如，当按下右箭头键时，当前显示的图像会向左滑动消失，图像会发生变化，从右侧滑入视图。这是我用于这种转换的代码：

$('#mainImage').hide("slide", { direction: "left" }, 200);
$('#mainImage').show("slide", { direction: "right" }, 700);
setTimeout(function() { changeImg(pageNumberNew); }, 200);

setTimeout() 函数纯粹是为了控制在转换中图像源何时会改变。 pageNumberNew 变量是要更改为的图像的 URL。这是changeImg() 函数：

function changeImg(number) {
      document.getElementById('mainImage').setAttribute('src', "/largefiles/2021roadatlas/Images/" + number + ".jpeg");
      curPageNumber = number;
      setWidth();
}

但是，在图像的第一次过渡时，它会变得非常不稳定，因为图像尚未加载。我尝试了各种预加载图像的方法，如

Preloading images with JavaScript

Preloading images with jQuery

Waiting for image to load in JavaScript

JavaScript waiting until an image is fully loaded before continuing script

但这些都没有奏效。

首次加载图像后，导航回该图像将很顺畅。我想要一个解决方案，其中可以在用户开始交互之前预加载这些图像，可能在转换发生之前加载每个图像 - 导致启动动画略有延迟，但允许它平滑。

如果您输入13 并使用左右箭头键，您可以看到我目前的操作here。如果您使用台式机，动画可能不会断断续续，请在移动设备上尝试该网站以查看问题。

明确：我想要一个方法预载JavaScript 中的图像，但我没能使用预加载图像的正常方法，如上所述。

【问题讨论】：

标签： javascript html jquery css preload

【解决方案1】：

它加载如此缓慢的原因是大图像。您应该使原始照片的图像尺寸更小。我可以看到原始大小约为 5000 x 6500，而您将其缩小到 1000 x 600 左右。原始图像过大导致加载缓慢。

【讨论】：