javascript - JQuery，尝试刷新时不为我的背景图片设置动画

Question

我在这里谈论这个网站:malcolmtanti.com

我正在使用这个功能:

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

为我的主要背景图像和标题等的淡入设置动画。它应该在我的 css 中的标题元素中淡入淡出。

这是 CSS:

header{
  position: relative;
  background: url(../images/background.jpg)  no-repeat top center; 
  background-size: cover !important;
  -webkit-background-size: cover !important;
  /*height: 700*/ 
  top:50px;
  min-height:95%;
  max-width: 100%;
  overflow: hidden;
  opacity:0;      
}

出于某种原因，我第一次访问该站点时，图片为我加载，但是当我按下刷新后，标题标签的不透明度仍为 0。这怎么可能？

Answer 1

浏览器缓存图像可能存在问题，因此当您刷新页面时它不会触发动画，因为图像已经预加载。

尝试加载具有唯一 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>