有没有办法使用javascript在循环中淡入和淡出相同的图像URL？答案

【问题标题】：Is there a way to fade in and out the same image URL on loop with javascript?有没有办法使用javascript在循环中淡入和淡出相同的图像URL？
【发布时间】：2019-08-23 11:18:18
【问题描述】：

我有一个存储在服务器端更新的网络服务器 (example.com/webcam.jpg) 上的图像。

我想在静态 HTML 页面上插入这张图片，但有一个循环不断重新加载图片（可能从上一张图片淡入到当前图片）

有 jquery 示例在 2 个具有 2 个不同地址的图像之间渐变，但在我的情况下，图像始终存储在相同的 URL 中，并且循环/渐变必须继续，直到用户离开页面。

到目前为止，我正在做的所有事情都是使用<meta http-equiv="refresh" content="5"> 来刷新整个页面。

【问题讨论】：

您的建议回答了在汽车中使用什么品牌的机油，而我的问题更多的是关于仍然获得驾驶执照。 :) 我没有考虑缓存的问题，我仍在试图弄清楚如何在循环中重新加载图像（具有淡入淡出效果），可能我最初的问题还不够清楚，我很抱歉。

标签： javascript jquery html ajax xmlhttprequest

【解决方案1】：

您可以使用setInterval 设置循环。

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

在循环中，将图像src= 设置为您的源图像，但这不会刷新您的图像，因为它将被浏览器缓存，因此您需要在 URL 中添加一些内容，以便浏览器认为它是新的图片。

setInterval(function() {
    document.getElementById("myimage").src = "/myimage.jpg" + new Date().getTime();
}, 5000);

你可以添加一个简单的淡入/淡出

setInterval(function() {
    $("#myimage").fadeOut(function() {
        this.src = "/myimage.jpg" + new Date().getTime();
        $(this).fadeIn();
    });
}, 5000);

最好等待图片加载完成，看这个答案：https://stackoverflow.com/a/5789300/2181514

为了获得更平滑的效果，您可以使用两张图片，就像您已经找到的答案一样，然后在加载另一张时无需隐藏其中一张。使用position:relative / position:absolute 将它们放在彼此的顶部，然后使用fadeIn 一个而另一个fadeOut 以使它们过渡（但不是这个问题的真正一部分，只是为了改善用户体验）。

【讨论】：