图像blob加载和css过滤器

Question

以某种方式可以做某事，不是在加载，而是在javascript中进行图像渲染吗？

我们有以下情况：

1. 使用xhr从远程服务器下载图像数据，并将其转换为blob。
2. 将blob网址传递给图片元素image.src = url;
3. 图片有一个onload监听器，它为图像设置css过滤器，每个图像都不同。

有时，特别是对于较大的图像，会出现未过滤图像的闪烁，并显示正确过滤的图像。另一方面，在src分配期间设置过滤器会导致先前显示的图像在过滤器错误的情况下闪烁片刻。这种情况发生在所有主流浏览器中。

任何想法如何让它如丝般顺滑？ ：）

Answer 1

试试这个。

1. 使用xhr从远程服务器下载图像数据，并将其转换为blob。

2. 在分配src之前，请隐藏img内容，方法是更改​​display或visibility属性。

   display: none;
   //OR
   visibility: hidden;
   

3. blob网址传递给图片元素image.src = url;。

   这会加载img内容，但它会不可见。

4. 现在根据您的要求应用CSS过滤器。 img将是不可见的，因此不会有任何闪烁或任何东西。

5. 现在更改display或visibility属性。

   display: initial;
   //OR
   visibility: visible;
   

   此外，如果您正在使用JQuery或其他库，您可以使用fadeIn()，slideDown()等功能为转换设置动画，这样它们看起来都非常流畅和华丽。

   < / LI>