如何在從遠程服務器加載圖像時顯示預加載器

Question

我需要在爲圖像元素分配URL時顯示加載圖標。我查看了本網站上的其他問題，其中僅詳細介紹瞭如何在加載頁面時爲圖像顯示優雅的預加載器。我需要的是在頁面加載後顯示預加載器。有兩種情況我正在尋找，我已經在下面解釋了。

1. 我動態創建一個DOM圖像元素併爲此元素指定一個URL。這樣做時，大約需要2-3秒才能在元素上顯示圖像，並且該區域在2-3秒內變爲空白。我需要做的是顯示一個預加載圖標，並在圖像加載後隱藏它。

2. 我動態地創建一個DIV圖像元素並指定一個URL到background:url()。這樣做時，大約需要2-3秒才能在元素上顯示圖像，並且該區域在2-3秒內變爲空白。我需要做的是顯示一個預加載圖標，並在圖像加載後隱藏它。

我如何能實現顯示了這兩種方案的預加載？

Answer 1

你可以通過使用load（）事件來完成。

當您第一次開始加載時，更改圖像以顯示預加載器，或者您想要這樣做。另外，附加一個「加載」事件。

然後，一旦圖像被加載，刪除你的預加載器並顯示圖像。

您需要爲CSS相關的一個（背景網址）做類似的技巧。你可以做的是直接加載圖像（通過創建一個new Image()），同時將背景url設置爲preloader圖標。

然後，一旦圖像被加載，做開關。由於瀏覽器只加載一次圖像而不管它使用的位置，它應該具有相同的效果。

Answer 2

有一個很好的教程和截屏上，在這樣：http://jqueryfordesigners.com/image-loading/

雖然在某些瀏覽器（如舊版本的IE）的.load（）函數不會對圖像的工作這麼好，在這種情況下你可以使用：https://github.com/JessThrysoee/jquery.imageload而不是.load（）以獲得更一致的跨瀏覽器體驗。