Html preloader - 延迟页面加载答案

【问题标题】：Html preloader - delay page loadHtml preloader - 延迟页面加载
【发布时间】：2022-01-29 19:21:41
【问题描述】：

我的新模板需要一些帮助 :)。在网页加载之前，我想显示一个预加载器 gif。我做到了，但它只显示了一点，因为页面加载速度非常快。所以我想延迟页面（以2秒为例），而不影响预加载器，所以它（预加载器）会出现2秒，直到页面加载。

这是我的代码（请注意，它不适用于 jsfiddle，因为我无法上传 .gif 文件）：jsfiddle.net/hLmxpsnw/

【问题讨论】：

等一下，您是说页面加载速度如此之快，以至于您实际上并不需要“正在加载...”消息，因此您想减慢页面的加载速度，以至于您将需要它？如果是这样，我拒绝合作。
为什么不用大量垃圾来加载页面，这样加载时间会更长？或者更好的是，Flash 介绍！
@Tim 不要给他任何想法。
李斯特先生，是的，也许你是对的。这是一个非常简单的即将推出的模板，带有一些效果，用于主题森林。我只是认为使用预加载器会更好看:)。
“加载中...”插曲永远不会让任何事情变得更好。这是对臃肿和缓慢的东西的道歉。

【解决方案1】：

无论出于何种原因，您都希望它使用 setTimeout 来完成，这里是代码

jQuery(document).ready(function ($) {
    $(window).load(function () {
        setTimeout(function(){
            $('#preloader').fadeOut('slow', function () {
            });
        },2000); // set the time here
    });  
});

jsfiddle http://jsfiddle.net/harshdand/593Lqqnm/2/

【讨论】：

这是我需要的。谢谢！ :)
注意：使用 jQuery 意味着首先加载 jQuery 库，而对于如此简单的事情，只需使用纯 js。在 html 文档的头部包含预加载器所需的 js 脚本和 css 规则。这将确保更快的加载。

【解决方案2】：

你可以使用 delay(); jquery函数添加delay到Preloader

$(document).ready(function () {
  $(window).load(function(){
  $('#preloader').delay(3000).fadeOut();
 });
});

【讨论】：

【解决方案3】：

这是一个示例

<script>
    setTimeout(function () {
        $('.loader-container').fadeToggle ();
    },3500);
</script>

【讨论】：

您的答案可以通过添加有关代码的作用以及它如何帮助 OP 的更多信息来改进。