Jquery網頁加載進度條（隨筆，固然要隨便寫，當日記動態心情寫咯）

首先先是吐槽時間。。。

告訴你們一個好消息，就是有個妹子很是仰慕個人前端技術說要包養我

而後有好多羨慕嫉妒恨的童鞋必定要說，少年你太天真了，那必定是HR

而後我表示她不是HR，本宅的春天貌似要到來了。。。T_T，25年的單身生涯。終於走到了盡頭......而後妹子也是前端。。。爲了保證光輝形象。我必要努力提高技術

 

 而後麼今天閒的蛋疼，再看看一幫大牛們的裝逼網站，而後無心間看到這一段，只想說大牛們的世界真會玩。。。。

利用圖片上data，還有load

最後在用document.readyState=="complete"解決當前加載判斷的問題。

 $(function () {
            var allImgArr = $("img");
            allImgArr.data("count", 0);
            allImgArr.load(function () {
                allImgArr.data("count", allImgArr.data("count") + 1);
                var percent = allImgArr.data("count") / allImgArr.length * 100 + "%";
                $("#loading-progress").stop(true, false).animate({ "width": percent }, 800);
            });
            var readyTimer = setInterval(function () {
                if (window.document.readyState == "complete") {
                    clearInterval(readyTimer);
                    $("#loading-progress").stop(true, false).animate({ "width": "100%" }, 800);
                    setTimeout(function () {
                        $(".loading-box").hide();
                    }, 1200);
                }
            }, 500);
        });

 

看到這一段以後，鄙視每天這個LOW貨，被他的代碼看了之後，我很長時間都認爲進度條只能這樣玩，在網頁裏寫

$(function(){$('.loading').animate({'width':'20%'},50) })

    <h2 class="title">置頂推薦</h2>

    <ul>    

<li class="item"><a href="/front/javascript/101.html"><img src="/uploads/allimg/150131/1-1501312144500-L.png" alt="js網頁拾色器製做教程" /><h3>js網頁拾色器製做教程</h3><p class="muted">1. 在動態網站中，常常會遇到要求用戶自定義顏色某些狀況，下面給你們帶來是216瀏覽器安全的顏色,即所謂Netscape色塊。這216種顏色分別表明0、5一、10二、15三、204這五種顏色即每一種原色（即紅、綠、藍）。 2. 在建立須要調用網頁拾色器的頁面，咱們...</p></a></li>
<li class="item"><a href="/front/javascript/106.html"><img src="/uploads/150203/1-150203212ISX.png" alt="js日期選擇器詳細教程" /><h3>js日期選擇器詳細教程</h3><p class="muted">製做日期選擇器首先須要添加2個下拉列表，用於要顯示的年份和月份，而後製做一個7行7列的表格,其中最頂部用於標記星期，其餘行用於顯示日期，下面的是關鍵的代碼 這個是html代碼 style body,td { font-size:9pt; } input { color:333333; font-size...</p></a></li>


    </ul>

    <script>

$(function(){$('.loading').animate({'width':'20%'},50) })

</script> 

</div>

http://www.divjs.cn/

 

繼續吐槽：不知道爲何最近個人同事們，HR，到阿姨，一直在各類撮合。。。讓我脫單。。。

可憐的我：就算帶着墨鏡都沒法體現出「吾孤高」