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

问题描述

我将此代码添加到我的网站，以便预加载器在我的网站加载之前显示，但我只能在我的网站加载之前显示背景颜色。

我正在尝试制作一个 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/

请问，我做错了什么？谢谢。

解决方法

我认为问题在于您提供的网址正确的代码应该是这样的（据我所知）url("https://4.bp.blogspot.com/-CVUATsjGPVg/YEC5gsBL18I/AAAAAAAACw8/g8ABr7RU79kjnJocwCpfQ5wgy1WR0uHRACK4BGAYYCw/s1600/latest%2Blogo.png")

检查您的 #page-loader 样式规则。从您使用的网址中删除此 '

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)

html javascript preloader