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，到阿姨，一直在各类撮合。。。让我脱单。。。

可怜的我：就算带着墨镜都没法体现出“吾孤高”