Question

我正在尝试实现模糊的渐进式图像加载，但这种情况一直在发生。

在模糊动画结束时，背景图像会跳跃/移动几个像素，然后再回到它的'＆＃39;原来的位置。

当完全显示背景图像时，在模糊动画结束时这是一个非常小的移动。然而，它对用户来说非常烦人。

＆＃13;

window.onload = function () {
  let downloadImage = new Image()
  downloadImage.onload = function () {
    let element = document.getElementsByClassName('progressive')[0]
    element.classList += ' loaded' 
  }
  downloadImage.src = 'https://preview.ibb.co/cHKBu6/banner_bg_web.png'
}

＆＃13;

.container {
  height:700px;
  width:100%;
  background-color:grey;
  position:relative;
  overflow:hidden;
}

.progressive {
  background: url('https://image.ibb.co/kajY7R/progressive_banner_bg_web.png') no-repeat;
  background-size:cover;
  background-position:50%;
  position:absolute;
  width:100%;
  height:100%;
  filter:blur(20px);
  transition:filter 2s;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
}

.progressive.loaded {
  background: url('https://preview.ibb.co/cHKBu6/banner_bg_web.png') no-repeat;
  background-size:cover;
  background-position:50%;
  filter:none;
}

＆＃13;

<div class='container'>
  <div class='progressive'>
    
  </div>
  <div class='content'>
    
  </div>
</div>

＆＃13;

无法弄清楚为什么会发生这种情况..

还尝试使用不同的图像，以确保它不是因为图像尺寸。

css过滤器模糊动画结束时捕捉/跳跃

0 个答案: