網站頂部顯示預先載入進度條preload.js

標籤：ansi   執行   lin   animate   his   hang   query   ie瀏覽器   網站   

網站載入的速度快的話，不會顯示進度條載入時候的樣式。

 支援性主流瀏覽器都支援，ie瀏覽器需要9以上9也支援。

使用方法

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script src="js/preload.js"></script><script type="text/javascript">$.QianLoad.PageLoading({    sleep: 50});</script>

/**/$.QianLoad = {    PageLoading: function(options) {        var defaults = {            delayTime: 500, //頁面載入完成後，載入進度條淡出速度            sleep: 0, //設定掛起,等於0時則無需掛起            css: ‘<style>*{margin:0;}.load-wrap{width:100%;height:100%;position:absolute;top:0;left:0;background:#ffffff}#pre-load{position:fixed;top:0;height:2px;background:#2085c5;transition:opacity .5s linear}#pre-load span{position:absolute;width:150px;height:2px;-webkit-border-radius:100%;-webkit-box-shadow:#2085c5 1px 0 6px 1px;opacity:1;right:-10px;-webkit-animation:pulse 2s ease-out 0s infinite}@-webkit-keyframes pulse{30%{opacity:.6}60%{opacity:0}to{opacity:.6}}</style>‘            //進度條樣式位置可以自己修改        }        var options = $.extend(defaults, options);        //在頁面未載入完畢之前顯示的loading Html自訂內容        $(‘head‘).append(defaults.css);        var _LoadingHtml = ‘<div class="load-wrap" style="width:100%;height:100%;position:absolute;top:0;left:0;background:#ffffff"><div id="pre-load">‘ + ‘<span></span>‘ + ‘</div></div>‘;        //呈現loading效果        $("body").append(_LoadingHtml);        //監聽頁面載入狀態        document.onreadystatechange = PageLoaded;        function PageLoaded() {            var loadingMask = $(‘#pre-load‘);            $({                property: 0            }).animate({                property: 98            }, {                duration: 3000,                step: function() {                    var percentage = Math.round(this.property);                    loadingMask.css(‘width‘, percentage + "%");                    //頁面載入後執行                    if (document.readyState == "complete") {                        loadingMask.css(‘width‘, 100 + "%");                        setTimeout(function() {                                loadingMask.animate({                                        "opacity": 0                                    },                                    options.delayTime,                                    function() {                                        $(this).remove();                                        $(".load-wrap").remove();                                        console.log(‘Loading has been successful‘);                                    });                            },                            options.sleep);                    }                }            });        }    }}

 

網站頂部顯示預先載入進度條preload.js