页面加载和图片加载loading
2024-10-20 03:49:13
准备放假了!也是闲着了 ,就来整理之前学到或用到的一下知识点和使用内容,这次记录的是关于加载的友好性loading!!!这里记录一下两种加载方法
1.页面加载的方法,它需要用到js里面两个方法
- document.onreadystatechange = function(){}
- document.readyState//有两个值
- interactive//加载中
- complete//加载完成
两个方法同时使用
document.onreadystatechange = function(){
if(document.readyState == "complete"){//如果加载完成
$('.loading').fadeOut();//让loading效果消失,显示页面
}
}
这里同时介绍两个网站:1.https://loading.io/,制作loading图案的网页,可以是svg,可以是gif,也可以是css3
2.https://icons8.com/preloaders/,同样也是找loading特效的网页
注意:都是部分要花钱,部分免费!
2.图片加载方式,同样的,需要用到js的Image图像对象和onload方法
$(function(){
var $img = $('img');
var num = 0;//计算请求的个数
$img.each(function(i){//遍历每个图片
var oImg = new Image();
oImg.onload = function(){
oImg.onload = null;//避免重复请求
$('.loading b').html( parseInt(num/ $img.length*100)+'%');//请求的个数/请求总数 的百分比
num++;//每次遍历请求,添加一次
if(num>= i){
$('.loading').fadeOut();
}
}
oImg.src = $img[i].src;
//注意:src属性的添加必须要onload方法的后面,不然报错!
})
})
下面是全部代码:(图片链接是远程,jq是cnd,复制代码可以直接加载)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
img{width:100%;}
.loading{background:green;position:fixed;top:0;left:0;width:100%;height:100%;z-index: 100;}
.loading .icon{width:100px;height:100px;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;font-size:30px;text-align:center;line-height:100px;color:white;}
.loading .icon span{display:block;position:absolute; width:80px;height:80px;border-radius:50%;box-shadow:0 2px 0 0 #ccc;top:10px;left:10px;animation:rotate 1s infinite linear;-webkit-animation:rotate 1s infinite linear;}
@keyframes rotate{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
@-webkit-keyframes rotate{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script> $(function(){ var $img = $('img');
var num = 0;
$img.each(function(i){
var oImg = new Image();
oImg.onload = function(){
oImg.onload = null;//避免重复请求
$('.loading b').html( parseInt(num/ $img.length*100)+'%'); num++;
if(num>= i){
$('.loading').fadeOut();
}
}
oImg.src = $img[i].src;
})
}) </script>
</head>
<body>
<div class="loading">
<div class="icon">
<span></span>
<b>0%</b>
</div>
</div> <img src="http://e.hiphotos.baidu.com/zhidao/pic/item/38dbb6fd5266d016bdeb8e0a932bd40735fa3525.jpg" alt="">
<img src="http://f.hiphotos.baidu.com/zhidao/pic/item/902397dda144ad3464639dc8d1a20cf430ad85a4.jpg" alt="">
<img src="http://attach.bbs.miui.com/forum/201605/11/163127pv36vrzvj7ggz8u4.jpg" alt="">
<img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1302/04/c0/17981969_1359970249179.jpg" alt="">
<img src="http://img2.imgtn.bdimg.com/it/u=1691627983,2796098531&fm=27&gp=0.jpg" alt="">
<img src="http://a.hiphotos.baidu.com/zhidao/pic/item/78310a55b319ebc49ff591188026cffc1f1716a5.jpg" alt="">
<img src="http://img2.imgtn.bdimg.com/it/u=3628218818,2760659836&fm=27&gp=0.jpg" alt="">
<img src="http://img3.imgtn.bdimg.com/it/u=3373860863,3150615791&fm=214&gp=0.jpg" alt="">
<img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1302/04/c0/17981969_1359970249174.jpg" alt="">
<img src="http://2t.5068.com/uploads/allimg/151028/57-15102QP537.jpg" alt="">
<img src="http://d.hiphotos.baidu.com/zhidao/pic/item/6c224f4a20a44623aa0705099b22720e0df3d788.jpg" alt=""> </body>
</html>
最新文章
- linux与php时间函数有关的错误解决
- nwjs解决页面透明化,启动时显示白屏的问题
- 共享业务稳定性测试&;技术创新组
- node-webkit教程(9)native api 之Tray(托盘)
- Java魔法堂:String.format详解
- selenium如何解决IE自动填充表单问题
- shell动态解析sql的binlog
- hdu 4705 排列组合
- SERVERCONFIG
- AutoCAD.net支持后台线程-Socket服务端
- JDK1.8的新特性
- 2018—自学Selenium+Python 笔记(一)
- SAP MM PO 中的Delivery Date并非保存在EKPO表里
- VMware Workstation 14 激活码
- 2017-9-10-Vim使用说明
- 为什么会出现container、injection技术?发展历史及未来发展趋势
- 记解决一次“HTTP Error 400. The request URL is invalid”的错误
- ImportError: cannot import name cbook
- java框架篇---hibernate主键生成策略
- EMC EMI 自行评估记录