图像Blob加载和CSS过滤器

Question

Is it somehow possible to do something, not on load, but on image render in javascript?

We have a following scenario:

1. Image data is downloaded from a remote server with xhr, and turned into a blob.
2. The blobs url is passed to the image element image.src = url;
3. Image has an onload listener, which sets a css filter for an image, different for each image.

Sometimes, especially for bigger images, there is a blink of an unfiltered image, and than a properly filtered image is displayed. On the other hand, setting the filter during the src assign causes the previously displayed image to flicker for a moment with a wrong filter. This happens in all major browsers.

Any ideas how to make it silky smooth? :)

Answer 1

Try this.

1. Image data is downloaded from a remote server with xhr, and turned into a blob.

2. Before assigning the src , hide the img contents, by changing either display or visibility attribute.

    display: none; //OR visibility: hidden; 

3. The blobs url is passed to the image element image.src = url; .

   This would load the img content but it would be invisible.

4. Now apply the CSS filters as per your requirement. The img would be invisible so there would be no flicker or anything.

5. Now change the display or visibility attribute back.

    display: initial; //OR visibility: visible; 

   Additionally, if you are using JQuery or some other library you can animate the transition using functions such as fadeIn() , slideDown() , so that it all appears super smooth and fancy.