【 jQuery】页面加载 fakeLoader.js 及修改

素颜马尾好姑娘i 2022-07-14 09:58 273阅读 0赞

在日常网站制作中，常常预见网站中内容过多，或者含有大量图片，导致加载缓慢，动画效果失常的情况。

于是小编查找了相关解决方法，下面是最为简单且实用的一种。

fakeLoader.js 是轻量级的 jQuery 插件，帮助你创建动态的全屏加载掩饰微调效果，模拟页面预加载的效果。

插件下载地址：[http://www.oschina.net/p/fakeloader-js][http_www.oschina.net_p_fakeloader-js]

效果演示：

![示例][20161206131031160]

使用方法：

1、body中插入以下html代码

2、head标签里嵌入

3、引入js库

4 调用fakeloader

5 选项解释

$(".fakeloader").fakeLoader({
    
    timeToHide:1200, //加载效果的持续时间
    
    zIndex:"999",//
    
    spinner:"spinner1",//可选值 'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7' 对应有7种效果
    
    bgColor:"#2ecc71", //加载时的背景颜色
    
    imagePath:"yourPath/customizedImage.gif" //自定义的加载图片，见demo8.html
    
    });

很容易就能实现在访问页面的时候，出现类似进度条的效果，且可以给网页一定的加载时间，提高访问质量。

但是小编在使用的过程中发现一点点不足，

$(document).ready(function(){
        
                $(".fakeloader").fakeLoader({
                    timeToHide:1200,
                    bgColor:"#3498db",
                    spinner:"spinner4"
                });
            });

就是，如果网页内容过多，应用以上代码时 ,会闪烁一下网页内容，然后才出现加载页面的现象。

是因为`$(document).ready()` 搞的鬼

[http://www.w3school.com.cn/jquery/event\_ready.asp][http_www.w3school.com.cn_jquery_event_ready.asp]

一种解释为：

使用 $(document).ready()，你能让你的事件在window加载之前加载或触发。所有你写在这个方法里面的都准备在最早的时刻加载或触发。也就是说，一旦DOM在浏览器中注册后，$(document).ready()里的代码就开始执行。这样用户在第一眼看见页面元素时，特效就可以运行了。

为了避免此现象的发生，小编改进了一下插件代码

1.在页面的最外层，添加一个大的div，然后设置该div的display属性为none，设置id为mytest  
2.修改插件部分代码

var settings = $.extend({
                timeToHide:1200, // Default Time to hide fakeLoader
                pos:'fixed',// Default Position
                top:'0px',  // Default Top value
                left:'0px', // Default Left value
                width:'100%', // Default width 
                height:'100%', // Default Height
                zIndex: '999',  // Default zIndex 
                bgColor: '#2ecc71', // Default background color
                spinner:'spinner7', // Default Spinner
                imagePath:'', // Default Path custom image
                fadeDiv:'' //diligentyang扩展，显示的div
            }, options);

setTimeout(function(){
        
        //加载时间到了以后，显示主页面的div
                if(settings.fadeDiv != ''){
                    $("#"+settings.fadeDiv).css("display","block");
                }
        //隐藏加载页面
                $(el).fadeOut();
            }, settings.timeToHide);

然后前端调用

$(document).ready(function(){
        
                $(".fakeloader").fakeLoader({
                    timeToHide:2000,
                    bgColor:"#1abc9c",
                    spinner:"spinner1",
                    fadeDiv:"mytest"
                });
    
            });

参考文档：jQuery中`$.extend()` 的用法

[http://www.poluoluo.com/jzxy/201509/424718.html][http_www.poluoluo.com_jzxy_201509_424718.html]

[http://www.jb51.net/article/51079.htm][http_www.jb51.net_article_51079.htm]

[http_www.oschina.net_p_fakeloader-js]: http://www.oschina.net/p/fakeloader-js
[20161206131031160]: /images/20220714/f457b0f9d2bb4686ac4a2f635c217919.png
[http_www.w3school.com.cn_jquery_event_ready.asp]: http://www.w3school.com.cn/jquery/event_ready.asp
[http_www.poluoluo.com_jzxy_201509_424718.html]: http://www.poluoluo.com/jzxy/201509/424718.html
[http_www.jb51.net_article_51079.htm]: http://www.jb51.net/article/51079.htm