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 相关文章推荐
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
Dec 02 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
浅谈Koa服务限流方法实践
Oct 23 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
Koa2微信公众号开发之消息管理
May 16 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
js实现移动端吸顶效果
Jan 08 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 Javascript
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类(查找/修改)xml文档
2013/03/26 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
php实现图片添加描边字和马赛克的方法
2014/12/10 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
深入理解Django中内置的用户认证
2017/10/06 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
python对象与json相互转换的方法
2019/05/07 Python
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
介绍一下常见的木马种类
2014/11/15 面试题
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
高中毕业自我鉴定
2013/12/13 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
护士毕业实习感言
2014/03/05 职场文书
中秋寄语大全
2014/04/11 职场文书
会计系毕业求职信
2014/08/07 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
毕业论文指导教师评语
2014/12/30 职场文书
街道社区活动报告
2015/02/05 职场文书