-
document.onreadystatechange 页面加载状态改变时的事件 document.readyState 返回当前文档的状态 前文档状态: uninitiallized 还未开始加载 loading 载入中 interactive 已加载,文档与用户可以开始交互 complete 载入完成
查看全部 -
解决兼容性问题:
查看全部 -
document.onreadystatechange 页面加载状态改变时的事件 document.readyState 返回当前文档的状态
transform: scaleY(0.4); 缩小高度 animation: load 1.2s infinite; 过1.2秒后持续性加载load方法 animation-delay: .4s; 延迟0.4秒加载; transform:rotate(360deg); 旋转 $("img").size(); 获取所有图片的个数。
www.loading.io 生成加载图标的css样式
preloaders.net 可以搜索 load 加载的图标
查看全部 -
创建new Image对象,用each遍历获取图片已加载的个数,然后除以总图片数,得到加载进度查看全部
-
居中:position:absolute;left:0;top:0,bottom:0;right:0;margin:auto;查看全部
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0;} body{ overflow: hidden;} .loading { width: 100%; height: 100%; position: fixed; background: #fff; left: 0; right: 0; z-index: 100; } .loading .pic{ position: absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:282px; height:282px;background: url("images/loading.gif");} </style> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var loading = '<div class="loading"><div class="pic"></div></div>'; $("body").prepend(loading); setInterval(function(){ $(".loading").fadeOut(); },3000) }) </script> </head> <body> <img src="http://img03.dengimg.com/Gallery/AutoLink/img_174179.jpg"> </body> </html>查看全部
-
修改后的代码 <script type="text/javascript"> $(function(){ // 一张图片缓存问题的解决方案 // var img = new Image(); // img.onload = function(){}; // img.src = ""; var img = $("img"); var num = 0; img.each(function(i){ var oImg = new Image(); oImg.onload = function(){ oImg.onload=null; num++ ; var len=img.length; $(".loading b").html(parseInt(num/len*100)+"%"); if(num >= i){ $(".loading").fadeOut(); } } oImg.src = img[i].src; }); })查看全部
-
www.loading.io //定制loading图片的网站 autoprefixer.github.io //补充css3的兼容代码网址查看全部
-
https://preloaders.net/en/free https://loading.io autoprefixer.github.io查看全部
-
preloaders.net查看全部
-
gif下载地址: http://preloaders.net查看全部
-
有点听不懂听不懂
查看全部 -
建立图像对象
查看全部 -
keyframes 是用于定义CSS动画的, 兼容得加-webkit-或者-o-之类 使用动画的时候,animation:animation: myfirst 5s linear 2s infinite alternate; anames(keyframes定义的动画名)) 5s(运行动画的时间) linear(动画加速匀速,ease为慢快慢) 2s(动画从2秒处开始,默认0) infinite(动画无限循环播放,默认是放1次) alternate(下一周期逆向播放,默认是normal); document.onreadystatechange 页面加载状态改变时的事件 document.readyState 返回当前文档的状态 transform: scaleY(0.4); 缩小高度 animation: load 1.2s infinite; 过1.2秒后持续性加载load方法 animation-delay: .4s; 延迟0.4秒加载; transform:rotate(360deg); 旋转
查看全部 -
fadeout jquery的渐隐,
查看全部
举报
0/150
提交
取消