javascript图片加载完成前显示loading图片
<html>
<title>图片预加载</title>
<body>
<script>
//判断浏览器
var Browser=new Object();
Browser.userAgent=window.navigator.userAgent.toLowerCase();
Browser.ie=/msie/.test(Browser.userAgent);
Browser.Moz=/gecko/.test(Browser.userAgent);
//判断是否加载完成
function Imagess(url,imgid,callback){
var val=url;
var img=new Image();
if(Browser.ie){
img.onreadystatechange =function(){
if(img.readyState=="complete"||img.readyState=="loaded"){
callback(img,imgid);
}
}
}else if(Browser.Moz){
img.onload=function(){
if(img.complete==true){
callback(img,imgid);
}
}
}
//如果因为网络或图片的原因发生异常,则显示该图片
img.onerror=function(){img.src='http://www.baidu.com/img/baidu_logo.gif'}
img.src=val;
}
//显示图片
function checkimg(obj,imgid){
document.getElementById(imgid).src=obj.src;
}
//初始化需要显示的图片,并且指定显示的位置
window.onload=function(){
Imagess("http://blog.moonsbird.com/wp-content/uploads/2017/04/cropped-82772650889143.58dc29485ed59.jpg","img1",checkimg);
Imagess("http://blog.moonsbird.com/wp-content/uploads/2017/04/cropped-82772650889143.58dc29485ed59.jpg","img2",checkimg);
Imagess("http://blog.moonsbird.com/wp-content/uploads/2017/04/cropped-82772650889143.58dc29485ed59.jpg","img3",checkimg);
Imagess("http://blog.moonsbird.com/wp-content/uploads/2017/04/cropped-8277.jpg","img4",checkimg);
Imagess("http://blog.moonsbird.com/wp-content/uploads/2017/04/cropped-82772650889143.58dc294","img5",checkimg);
}
</script>
<img id="img1" src="loading.gif" width="100" height="100" />
<img id="img2" src="loading.gif" width="100" height="100" />
<img id="img3" src="loading.gif" width="100" height="100" />
<img id="img4" src="loading.gif" width="100" height="100" />
<img id="img5" src="loading.gif" width="100" height="100" />
</body>
</html>
javascript图片加载完成前显示loading图片的更多相关文章
- vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现
1. 创建 loading 公用组件 <template> <div class="load-container"> <div class=" ...
- vue项目未加载完成前显示loading...
1.在Index.html里面加入loading的元素,让loading元素显示,让app元素隐藏 <!DOCTYPE html> <html> <head> &l ...
- ionic 图片加载失败,显示默认图片代替
1.首先编写自定义指令 angular.module('starter.directives', []) //当图片找不到事显示替代图片 .directive("errSrc", ...
- 在页面未加载完之前显示loading动画
在页面未加载完之前显示loading动画 这里有很多比这篇博客还优秀的loading动画源码 我还参考这篇博客 loading动画代码demo 我的demo预览 <!DOCTYPE html&g ...
- css3实现loading效果--当页面加载过程中显示Loading的进度条,全部加载完成之后进度条消失
一个页面等图片资源全部加载完成,会需要很长时间,用户体验会很差,所以我们需要loading来掩盖这个漫长的过程! emmm,定时器?写个定时器还要清除,万一造成内存泄露?定时器之间还会互相影响,呼呼呼 ...
- 页面数据加载完成时,显示loading页面.数据加载完,loading隐藏.
一,引入三个文件 jQuery版本使用 jQuery v1.7.1 jquery-easyui文件中,引入easyui-lang-zh_CN.js的js 做数据加载时使用jquery.blockui. ...
- Jquery判断页面图片是否加载失败,加载失败则显示默认图片
例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
- img 加载网络图片失败 显示默认图片
1. 概述 当从网络加载图片失败 希望显示默认图 img 标签有个 onerror属性 2. 代码 2.1 java服务端组织标签整个返回前端 String imgUrl = "javasc ...
- 【JavaScript】图片加载由模糊变清晰 —— 图片优化
开发过程中,一些图片的展示时,加载很慢很久,后来把图片缩放压成缩略图吧,速度是快了但是模糊不清,如何处理这样问题,下面就和大家分享一下自己的处理方法. 先让客户端加载像素小的缩略图: <img ...
随机推荐
- 我对sessionid的理解
不知道是不是扯蛋,还是太菜... 看上面的的话毫不关系是吧...自己看过一点 关于 说session id 的 一些文章, 貌似都是一样的....以下内容个人理解, 请大家指正... 我想自己举个例子 ...
- elementUI字体图标不显示问题
原文链接: 点我 自己搭建的Vue项目,没有使用vue-cli,引入elementUI时提示字体图标404,找不到文件,如下错误: GET http://localhost:9090/WEB-INF/ ...
- 信息竞赛进阶指南--区间最值问题的ST算法
void ST_prework() { for (int i = 1; i <= n; i++) f[i][0] = a[i]; int t = log(n) / log(2) + 1; for ...
- hdu2544最短路
在每年的校赛里,所有进入决赛的同学都会获得一件很漂亮的t-shirt.但是每当我们的工作人员把上百件的衣服从商店运回到赛场的时候,却是非常累的!所以现在他们想要寻找最短的从商店到赛场的路线,你可以帮助 ...
- 使用docker搭建自己的博客(一)
购买服务器 首先服务器选择腾讯云学生服务器,25岁以下实名认证后月租10块,还是很适合我这种简约派的 又财大气粗买了个一年的域名,后面涨价再说吧 安装docker 使用xshell连上服务器 安装必要 ...
- 《Docker从入门到跑路》之多阶段构建
多阶段构建就是在一个Dokcerfile中定义多个FROM,每个FROM都可以使用不同的基础镜像,并表示开始一个新的构建阶段,我们可以很方便的将一个阶段的文件复制到另外一个阶段中,在最终的阶段保存你需 ...
- Dreamoon Likes Coloring(模拟+构造)
\(这题刚好撞到我的思路了,但是因为模拟......我看了几十遍测试数据....\) $首先当\sum_^m$小于n时一定无解 大于呢?那我们就要浪费一些区间(覆盖一些点,也就是多出来的点) 但是又不 ...
- Spring Cloud 学习 之 Spring Cloud Eureka(源码分析)
Spring Cloud 学习 之 Spring Cloud Eureka(源码分析) Spring Boot版本:2.1.4.RELEASE Spring Cloud版本:Greenwich.SR1 ...
- 【HBase】快速搞定HBase与Hive的对比、整合
目录 对比 整合 需求一 步骤 一.将HBase的五个jar包拷贝到Hive的lib目录下 二.修改hive的配置文件 三.在Hive中建表 四.创建hive管理表与HBase映射 五.在HBase中 ...
- 【hdu1006】解方程
http://acm.hdu.edu.cn/showproblem.php?pid=1006 这题坑了我好久,发现居然是一个除法变成了整除,TAT,所以建议在写较长的运算表达式的时候出现了除法尽量加个 ...