有点听不懂听不懂
建立图像对象
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的渐隐,
document.onreadystatechange 页面加载状态改变时的事件 document.readyState 返回当前文档的状态 前文档状态: uninitiallized 还未开始加载 loading 载入中 interactive 已加载,文档与用户可以开始交互 complete 载入完成
注意细节……
进度条加载类型 1.从左到右滑动 2.WiFi图像 3.国外网站黑色 4.进度百分比
uninitiallized 还未开始加载
loading 载入中
interactive 已加载,文档与用户可以开始交互
complete 载入完成
通过加载状态事件制作进度条
document.onreadystatechange 页面加载状态改变时的事件
document.readyState 返回当前文档的状态
相同效果的显示<div>标签放变量里,然后获取到body
定时,3秒后显示图片
动态加载进度
$(".loading").fadeout():渐隐
document.onreadystatechange 页面加载状态改变时的事件
document.readyState 返回当前文档的状态
建立图像对象:图像对象名称=new Image()
属性:border complete height...
事件:onload onerror onkeydown onkeypress...
src属性一定要写到onload的后面,否则程序在IE中会出错
通过加载状态事件制作进度条
document.onreadystatechange 页面加载状态改变时的事件
document.readState 返回当前文档的状态
解决兼容性问题:
document.onreadystatechange->页面加载状态改变时的事件
document.readyState->返回当前文档的状态
几种加载状态:
用定时器(延迟3秒钟)解决页面加载缓慢的问题,第一次打开页面可以,但是第二次打开的话还是会执行这个定时器没有展现出实时加载的进度,并没有使用缓存这是不行的;
preloaders.net->图标网站
阿里的字体库:http://www.iconfont.cn
课程知识点
课程知识点
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 加载的图标
preloaders.net