Javascript JQuery，尝试刷新时不设置背景图像动画

我在这里说的是这个网站：

我正在使用此功能：

<script>
  var image = new Image();
  image.onload = function () {
    $('header').animate({opacity: 1}, 2000);
  }
  image.src = "./images/background.jpg";
</script>

---

由于某些原因，我第一次访问网站时，图片会为我加载，但一旦我按“刷新”，标题标记的不透明度将保持为0。这怎么可能

U使用了（link标记，script标记）href=”“和脚本src中的链接，如下所示。不要这样使用。复制上述链接的代码并将其放在文件夹中，并引用该本地链接。

浏览器缓存图像可能有问题，以便在刷新页面时不会触发动画，因为图像已预加载

尝试加载具有唯一id（如当前时间）的图像以防止出现这种情况

<script>
  var image = $('<img/>');
  var srcText = './images/background.jpg?t=' + new Date().getTime();
  image.attr('src', srcText).load(function() {
    $(this).remove();
    $('header').animate({opacity: 1}, 2000);
  });
</script>

var image=$（'

它对我有效，试着在你的onload事件上添加一个调试器，看看它在图像加载时是否在里面？也试着在onload事件上移动

image.src

我使用chrome和edge？你是否使用另一个浏览器@RehbanKhatri我会试试看。不过我会建议另一个解决方案。使用

onload属性，并调用里面的Javascript函数来设置元素的动画？我肯定它会起作用并解决问题。让我知道这是否有效。我会将其添加为答案如果不是在header元素上，则将其添加到你的
img
元素以加载图像问题是，我不想等待bo中的项目ttom节在加载之前加载。我希望在加载图像后立即加载它。这样我就避免了渐进式加载大图像的过程，这样效果会很好！这是如何工作的？是因为srcText变量中的日期/时间参数吗？因此，我猜每次都必须加载一个新图像？对吗？
<script>
  var image = $('<img/>');
  var srcText = './images/background.jpg?t=' + new Date().getTime();
  image.attr('src', srcText).load(function() {
    $(this).remove();
    $('header').animate({opacity: 1}, 2000);
  });
</script>