js实现图片在未加载完成前显示加载中字样


Posted in Javascript onSeptember 03, 2014
<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://hiphotos.baidu.com/lovebyakuya/pic/item/01cf20088f9506f063d98653.jpg","img1",checkimg);
  Imagess("http://hiphotos.baidu.com/lovebyakuya/pic/item/7b7b19c70d62f4fdd0006050.jpg","img2",checkimg);
  Imagess("http://hiphotos.baidu.com/joanne728/pic/item/892557641806d20eaa184c71.jpg","img3",checkimg);
  Imagess("http://www.neocha.com/-/res/Camilla/20071204181216078845_h.jpg","img4",checkimg);
  Imagess("http://www.neocha.com/-/res/Camilla/20071204181216d078845_h.","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 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
对象特征检测法判断浏览器对javascript对象的支持
Jul 25 Javascript
javascript 一些用法小结
Sep 11 Javascript
js创建元素(节点)示例
Jan 02 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
JavaScript模拟push
Mar 06 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
Bootstrap进度条学习使用
Feb 09 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
jquery.idTabs 选项卡使用示例代码
Sep 03 #Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 #Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 #Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 #Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 #Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 #Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 #Javascript
You might like
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
php生成动态验证码gif图片
2015/10/19 PHP
php生成gif动画的方法
2015/11/05 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
深入理解python多进程编程
2016/06/12 Python
python操作excel让工作自动化
2019/08/09 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
教师自我评价范例
2013/09/24 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
公司业务员管理制度
2015/08/05 职场文书
Python实现机器学习算法的分类
2021/06/03 Python
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers