如何在我的网站加载之前制作一个 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&#39;) 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(&#39;https://4.bp.blogspot.com/-CVUATsjGPVg/YEC5gsBL18I/AAAAAAAACw8/g8ABr7RU79kjnJocwCpfQ5wgy1WR0uHRACK4BGAYYCw/s1600/latest%2Blogo.png&#39;)

至

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

如何在我的网站加载之前制作一个 gif 图标以显示在我的预加载器上

How can I make a gif icon to show on my pre-loader before my website loads

html

javascript

css

preloader