Jquery网页加载进度条(随笔,当然要随便写,当日记动态心情写咯)

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體: 小  |  中  |  大  |  超大  

首先先是吐槽时间。。。

告诉大家一个好消息,就是有个妹子非常仰慕我的前端技术说要包养我然后有好多羡慕嫉妒恨的童鞋一定要说,少年你太天真了,那一定是HR然后我表示她不是HR,本宅的春天貌似要到来了。。。T_T,25年的单身生涯。终于走到了尽头......然后妹子也是前端。。。为了保证光辉形象。我必要努力提升技术

然后么今天闲的蛋疼,再看看一帮大牛们的装逼网站,然后无意间看到这一段,只想说大牛们的世界真会玩。。。。利用图片上data,还有load

最后在用document.readyState=="complete"解决当前加载判断的问题。

$(function() {varallImgArr = $("img");

allImgArr.data("count", 0);

allImgArr.load(function() {

allImgArr.data("count", allImgArr.data("count") + 1);varpercent = allImgArr.data("count") / allImgArr.length * 100 + "%";

$("#loading-PRogress").stop(true,false).animate({ "width": percent }, 800);

});varreadyTimer = 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、51、102、153、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,到阿姨,一直在各种撮合。。。让我脱单。。。可怜的我:就算带着墨镜都无法体现出“吾孤高”

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航