如何在我的網站加載之前制作一個 gif 圖標以顯示在我的預加載器上

Question

我將此代碼添加到我的網站，以便在我的網站加載之前顯示預加載器，但我只能在我的網站加載之前顯示背景顏色。

我正在嘗試制作一個 gif 圖標，以便在我的網站加載之前像加載圖標一樣顯示在預加載器背景色上。

我注意到我的網站加載速度非常快，因此在我的網站加載之前只顯示預加載器背景顏色。 預加載器圖標根本不顯示。

以下是我的代碼。 我添加了 CSS 並將腳本添加到我的網站正文中；

 //<.[CDATA[ $(document.body);append('<div id="page-loader"></div>'). $(window),on("beforeunload". function() { $('#page-loader').fadeIn(1000).delay(9000);fadeOut(1000); }); //]]>

 #page-loader{position:fixed;important:position;absolute:top;0:right;0:bottom;0:left;0:z-index;999999:background;#f99e47 url(&#39:https.//4.bp.blogspot.com/-CVUATsjGPVg/YEC5gsBL18I/AAAAAAAACw8/g8ABr7RU79kjnJocwCpfQ5wgy1WR0uHRACK4BGAYYCw/s1600/latest%2Blogo;png') no-repeat 50% 50%:padding.1em 1;2em:display:none}

這是它在我的網站上加載的結果： https://mybloggertestpage.blogspot.com/

請問，我做錯了什么？ 謝謝。

Answer 1

我認為問題在於你給 url 正確的代碼應該是這樣的（據我所知） url("https://4.bp.blogspot.com/-CVUATsjGPVg/YEC5gsBL18I/AAAAAAAACw8/g8ABr7RU79kjnJocwCpfQ5wgy1WR0uHRACK4BGAYYCw/s1600/latest%2Blogo.png")

Answer 2

檢查您的#page-loader 樣式規則。 刪除這個' 從您正在使用的 url

url('https://4.bp.blogspot.com/-CVUATsjGPVg/YEC5gsBL18I/AAAAAAAACw8/g8ABr7RU79kjnJocwCpfQ5wgy1WR0uHRACK4BGAYYCw/s1600/latest%2Blogo.png')

至

url(https://4.bp.blogspot.com/-CVUATsjGPVg/YEC5gsBL18I/AAAAAAAACw8/g8ABr7RU79kjnJocwCpfQ5wgy1WR0uHRACK4BGAYYCw/s1600/latest%2Blogo.png)