如何修改jQuery代码让加载图标在页面初始加载时即显示？

嘿，我知道你现在头疼预加载图标只在加载快结束时才出现的问题——其实根源就在你用的jQuery(document).ready()上！这个事件得等整个DOM结构都加载完才会触发，这就导致你的图标要等到页面加载快收尾了才开始处理，自然看起来出现得晚。

下面给你两个关键步骤来搞定它：

1. 先让图标默认就显示出来 #

首先检查你的CSS，一定要让#wptime-plugin-preloader默认是显示状态，这样浏览器一读到这个元素就立刻渲染，不用等JS触发：

#wptime-plugin-preloader {
    display: block !important;
    /* 这里保留你原本的全屏、居中图标、背景色这些样式就行 */
}

如果之前这个元素被设置成display: none了，赶紧把这个规则删掉，或者用!important强制覆盖掉隐藏的样式。

2. 修改JS逻辑，不用等DOM ready再执行 #

原来的代码绑在document.ready上，太慢了。你可以改成下面两种方案之一：

方案一：保留固定延迟隐藏（贴合你原来的需求） #

把代码改成直接执行，不用等DOM完全加载（前提是jQuery已经在页面里加载好了），或者把这段代码放在预加载元素的后面：

jQuery(function() {
    jQuery('#wptime-plugin-preloader').delay(2050).fadeOut("slow");
});

要是你把这段JS放在<head>里，记得确保jQuery已经提前加载了，不然会报错。

方案二：等页面完全加载完再隐藏（更合理的用户体验） #

如果你希望图标一直显示到所有图片、样式这些资源都加载完成，而不是固定等2秒，可以改成绑定window.load事件：

jQuery(window).on('load', function() {
    jQuery('#wptime-plugin-preloader').fadeOut("slow");
});

这样不管页面加载多久，图标都会一直显示到所有内容准备好，再平滑消失，用户体验会更好。

最后再提个小建议：把预加载图标的HTML代码放在<body>标签的最开头，这样浏览器会优先解析它，不会被其他内容阻塞，能进一步确保它在页面加载初始阶段就显示出来。

内容的提问来源于stack exchange，提问作者TPA