Question

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

例如我有HTML

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

现在如果图像很重，会发生相应元素的空白。我想保留每个图像blury版本和锐利版本的2个版本。

现在我希望直到清晰的图像被加载完全显示该图像的blury图像，并且一旦加载了清晰的图像就会显示清晰的图像。

我可以用onload事件来做，比如保持2个图像标签一个用blury图像另一个用锐利显示默认blury一个图像和加载事件的清晰图像隐藏blury一个并显示尖锐的一个。

我希望了解最佳的最佳实践，以便顺利实现这一行为。

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属性。如果有，它不会将图像更改为更快的图像。

Answer 2

不要保留2个图像标记，只需在HTML中保留1个图像标记即可获得模糊图像。然后使用javascript创建另一个图像元素并设置清晰的图像源，如下所示 -

var img= document.createElement('img');
img.src= src;

现在使用此动态创建的图像的onload事件，用清晰的图像替换HTML中的模糊图像。

这样，照片库中就不会有2 * n张图片了。

Answer 3

最初加载轻量级图片，同时保留data-src，这将保留属性中的heavy图像路径。
在window.onload上，迭代容器中的所有图片并加载路径存储在data-src
加载大图像后更改图像的src。

试试这个：

$('#parentElement').find('img').each(function() {
  var img = new Image();
  var elem = $(this);
  img.onload = function() {
    elem.attr('src', this.src);
  }
  img.src = elem.attr('data-src');
});

显示带模糊效果的图像

3 个答案: