页面加载和图片加载loading
准备放假了!也是闲着了 ,就来整理之前学到或用到的一下知识点和使用内容,这次记录的是关于加载的友好性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>
页面加载和图片加载loading的更多相关文章
- 判断图片加载完成,自适应iframe高度
在做RSS订阅的时候遇到这样一个问题:点击文章标题时,弹出文章的详细界面.本来打算直接用弹出div层来显示文章的内容,但是设置div的overflow:scroll滚动条不好看,还有就是在androi ...
- 深入探索Glide图片加载框架:做了哪些优化?如何管理生命周期?怎么做大图加载?
前言 Glide可以说是最常用的图片加载框架了,Glide链式调用使用方便,性能上也可以满足大多数场景的使用,Glide源码与原理也是面试中的常客. 但是Glide的源码内容比较多,想要学习它的源码往 ...
- vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现
1. 创建 loading 公用组件 <template> <div class="load-container"> <div class=" ...
- JQuery图片加载显示loading和加载失败默认图片
在很多时候我们需要用到图片加载功能,在网上搜资料后就想为了以后使用方便重新整理了下,结果如图: 最后一张是加载失败显示的图片,没找到合适的图片,先用他顶替. 页面引用 <div class=&q ...
- 基于jQuery的图片加载loading效果插件
基于jQuery的图片加载loading效果插件 图片loading的效果是网页中比较常见的,尤其是对大图片,loading效果让用户能够明白图片加载的过程. 实现思路也是比较简单的: $.fn.Lo ...
- layer iframe加载单个图片或者加载页面
加载单个图片 layer.open({ type: , title: false, closeBtn: , area: '150px', skin: 'layui-layer-nobg', //没有背 ...
- 当h5页面图片加载失败后,给定一个默认图
本文主要讨论页面中图片加载失败后替换默认图片的几种方式 重点来了:一定要记住error事件不冒泡. 相关的知识点:jquery的ready方法.$("img").error().i ...
- css背景图片加载失败,页面部分图标无法显示
1.问题表现:首屏缺失部分图标.点击按钮切换为激活状态时,部分按钮的激活态图标无法显示. 2.问题原因:网络极差,断断续续,点击时添加class:active变为激活态, active.png这张图片 ...
- jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...
随机推荐
- 百万年薪python之路 -- 并发编程之 多线程 一
多线程 1.进程: 生产者消费者模型 一种编程思想,模型,设计模式,理论等等,都是交给你一种编程的方法,以后遇到类似的情况,套用即可 生产者与消费者模型的三要素: 生产者:产生数据的 消费者:接收数据 ...
- 惊人!Spring5 AOP 默认使用Cglib ?从现象到源码深度分析
Spring5 AOP 默认使用 Cglib 了?我第一次听到这个说法是在一个微信群里: 真的假的?查阅文档 刚看到这个说法的时候,我是保持怀疑态度的. 大家都知道 Spring5 之前的版本 AOP ...
- 解决js计算0.1+0.2 !==0.3
经常做用js数据运算的同学应该了解,在js中,0.1+0.2不会等于0.3,而是等于: 我一开始发现这个bug的时候也觉得很奇怪,那怎么去解决这个bug,让0.1+0.2 最后能得到0.3呢? 方法一 ...
- 树莓派上搭建arduino命令行开发环境
-------------还是博客园上面的格式看这舒服,不去新浪了------------- 为什么要在树莓派上开发arduino呢?总要把树莓派用起来嘛,不然老吃灰. 树莓派使用SSH时没有图形界面 ...
- 微软并发Key-Value存储库FASTER介绍
微软支持并发的Key-Value 存储库有C++与C#两个版本.号称迄今为止最快的并发键值存储.下面是C#版本翻译: FASTER C#可在.NET Framework和.NET Core中运行,并且 ...
- [NOI2001]食物链(并查集拓展域)&& [HAOI2006]旅行(Kruskal)
题目描述 动物王国中有三类动物 A,B,C,这三类动物的食物链构成了有趣的环形.A 吃 B,B 吃 C,C 吃 A. 现有 N 个动物,以 1 - N 编号.每个动物都是 A,B,C 中的一种,但是我 ...
- vue 踩坑--项目名称不能与插件名称一样
今天webpack搭建,命令行一直报错 百度说是项目名称为:vue npm 拒绝安装 后来才发现是 package.json的name名称也设成了vue 所以 修改一下就可以了.
- fenby C语言 P11
else {} if {} #include int main() { int a=15; if(a%2==0) { printf("我是偶数!"); }else { printf ...
- pymysql 防止sql注入案例
from pymysql import connect def main(): """sql演示""" # 1.输入一个语句,根据id展示相 ...
- Tomcat项目部署
一 之前一直是在ecplise 利用tomcat插件的形式启动项目,这里可以通过选择server.xml和context files两种方式这里选择这两者方式,都是会在tomcat/bin下产生对应的 ...