javascript - 显示具有模糊效果的图像

Question

我在照片库中寻找具有模糊效果的渲染图像。

例如我有 HTML

<div>
 <ul>
  <li>
   <img>
  </li>
  <li>
   <img>
  </li>
  <li>
   <img>
  </li>
  <li>
   <img>
  </li>
</ul>
</div>

现在如果图像很重然后对应元素显示为空白会发生什么。我想维护每个图像模糊版本和清晰版本的 2 个版本。

现在我希望在清晰图像完全加载之前显示该图像的模糊图像，一旦清晰图像加载显示清晰图像。

我可以通过 onload 事件来做到这一点，比如保留 2 个图像标签，一个带有模糊图像，另一个带有清晰图像，默认情况下显示模糊图像，在清晰图像的加载事件中隐藏模糊图像并显示清晰图像。

我想了解以顺利方式实现此行为的最佳最佳实践。

Answer 1

我创建了这个 https://jsfiddle.net/j8fnomse/3/

使用 css3 滤镜可以实现的模糊效果

.slow {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px)
}

分别加载每张图片

var slowImage = new Image();
slowImage.src = slow;
var fastImage = new Image();
fastImage.src = fast;

加载完成后，您可以将它们添加到 DOM 中，并且可以为较慢的加载添加模糊。

$(fastImage).load(function(){
    if(!$img.attr("data-loaded"))
        $img.attr("src", slowImage.src).addClass("slow");
});
$(slowImage).load(function(){
    setTimeout(function() { // only to slow things down for demonstration
        $img.attr("src", slowImage.src).removeClass("slow").attr("data-loaded", true);
  }, 2000);
});

你还应该检查一下，如果没有首先加载更快的图像，我会用 data-loaded 属性检查它。当图像加载速度较慢时，它会添加 data-loaded 属性。当加载较慢的图像时，它会检查它是否具有 data-loaded 属性。如果有，它不会将图像更改为更快的图像。