如何设置preloader（预加载器）最长显示时间 附现有实现代码

要实现预加载器最长显示时间限制，你只需要在原有JS逻辑基础上新增超时强制隐藏规则，同时增加状态标识避免和原有页面加载完成的隐藏逻辑重复触发即可，CSS和HTML部分不需要改动。

修改后的完整JS代码 #

// 预加载器隐藏状态标识，避免重复执行隐藏动画
let preloaderHidden = false;
// 最长显示时间设置，示例为5000毫秒=5秒，可按需修改数值
setTimeout(function() {
    "use strict";
    if (!preloaderHidden && jQuery('.et-bfb').length <= 0 && jQuery('.et-fb').length <= 0) {
        jQuery(".status").fadeOut();
        jQuery(".preloader").delay(1000).fadeOut("slow");
        preloaderHidden = true;
    }
}, 5000);

// 原有页面加载完成后的隐藏逻辑
jQuery(window).load(function () {
    "use strict";
    // 已被超时逻辑隐藏的话直接跳过执行
    if (preloaderHidden) return;
    if (jQuery('.et-bfb').length <= 0 && jQuery('.et-fb').length <= 0) { 
        jQuery(".status").fadeOut();
        jQuery(".preloader").delay(1000).fadeOut("slow");
    } else {
        jQuery(".preloader").css('display','none');
    }
    preloaderHidden = true;
});

可调整参数说明 #

• setTimeout的第二个参数（示例中的5000）：预加载器的最长显示时间，单位为毫秒，修改为3000即为最长显示3秒
• 原有逻辑中的delay(1000)：页面加载完成后预加载器延迟消失的时间，单位为毫秒，可按需调整

如果页面在你设置的最长时间之前加载完成，预加载器会按原有逻辑提前隐藏，不会强制等到最长时间才消失，不会影响正常网络下的用户体验。

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