圖像Blob加載和CSS過濾器

Question

是否有可能做一些事情，而不是在加載時，而是在javascript中渲染圖像？

我們有以下情形：

1. 使用xhr從遠程服務器下載圖像數據，然后將其轉換為blob。
2. Blob網址會傳遞到圖片元素image.src = url;
3. Image具有onload偵聽器，該偵聽器為圖像設置css過濾器，每個圖像均不同。

有時，特別是對於較大的圖像，會出現未過濾圖像的閃爍，然后顯示正確過濾的圖像。 另一方面，在src分配期間設置濾鏡會導致先前顯示的圖像在濾鏡錯誤的情況下閃爍片刻。 在所有主要的瀏覽器中都會發生這種情況。

有什么想法如何使它柔滑嗎？ :)

Answer 1

嘗試這個。

1. 使用xhr從遠程服務器下載圖像數據，然后將其轉換為blob。

2. 在分配src之前，請通過更改display或visibility屬性來隱藏img內容。

    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()類的動畫效果對過渡進行動畫處理，從而使它們看起來都非常流暢和漂亮。