javascript顺序加载图片的方法


Posted in Javascript onJuly 18, 2015

本文实例讲述了javascript顺序加载图片的方法。分享给大家供大家参考。具体如下:

javascript监听一个图片是否加载完毕 如果加载完成再加载下一张,不是一次性从服务器加载 减少服务器压力,
可用到的地方:比如制作类似google地图的应用,可以使小图一张一张的加载

function Load_pic(arr){
 this.loop_f=function(i,o_file,len,f,obj){
   if(i<len-1){
     i=i+1;
     f(i,o_file,len,obj);
     }
  };
  this.creat_pic=function(i,o_file,len,obj){
    var f=arguments.callee,
    doc=document,
    image = doc.createElement("img");  
    image.src =o_file[i];
    i<len?doc.getElementsByTagName("body")[0].appendChild(image):'';
    if(navigator.userAgent.indexOf("MSIE")>0){ 
        if($.browser.version==6.0 || $.browser.version==9.0){
        //IE9和IE6一样 微软真是怪异
          image.onreadystatechange = function () { 
            if (image.readyState == "complete"){ 
              obj.loop_f(i,o_file,len,f,obj);
            } 
          }; 
        }else{ 
          ie7imagetime = window.setInterval(function(){ 
            var rs = image.readyState; 
            if(rs=="complete"){ 
              window.clearInterval(ie7imagetime); 
              obj.loop_f(i,o_file,len,f,obj);
            }else{ 
              return; 
            } 
          },200); 
        } 
      }else{ 
        image.onload = function () { 
          if (image.complete == true){ 
          obj.loop_f(i,o_file,len,f,obj);
          } 
        }; 
    }
  }; 
   if(arr.constructor===Array){
   var len=arr.length,
      i=0;
   i<len?this.creat_pic(i,arr,len,this):'';
  };
 }
//调用方法
new Load_pic([
'http://gomap.dashilan.cn/jquery-mobile/map/cq/1/img_1/0_0.gif',
'http://gomap.dashilan.cn/jquery-mobile/map/cq/1/img_1/0_1.gif',
'http://gomap.dashilan.cn/jquery-mobile/map/cq/1/img_1/0_2.gif',
'http://gomap.dashilan.cn/jquery-mobile/map/cq/1/img_1/0_3.gif',
'http://gomap.dashilan.cn/jquery-mobile/map/cq/1/img_1/1_0.gif',
'http://gomap.dashilan.cn/jquery-mobile/map/cq/1/img_1/1_1.gif',
'http://gomap.dashilan.cn/jquery-mobile/map/cq/1/img_1/1_2.gif',
'http://gomap.dashilan.cn/jquery-mobile/map/cq/1/img_1/1_3.gif'
]);
//注意要调用jquery 用于判断浏览器

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
FormValidate 表单验证功能代码更新并提供下载
Aug 23 Javascript
关于js datetime的那点事
Nov 15 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
jquery实现checkbox 全选/全不选的通用写法
Feb 22 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
js实现登录与注册界面
Nov 01 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 Javascript
javascript字符串循环匹配实例分析
Jul 17 #Javascript
动态加载jQuery的两种方法实例分析
Jul 17 #Javascript
javascript父子页面通讯实例详解
Jul 17 #Javascript
javascript实现的闭包简单实例
Jul 17 #Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 #Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 #Javascript
JavaScript之AOP编程实例
Jul 17 #Javascript
You might like
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
php中的依赖注入实例详解
2019/08/14 PHP
如何在PHP中读写文件
2020/09/07 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
详解Django通用视图中的函数包装
2015/07/21 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
Python编程实现蚁群算法详解
2017/11/13 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
keras之权重初始化方式
2020/05/21 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
机电一体化专业应届本科生求职信
2013/09/27 职场文书
项目建议书格式
2014/03/12 职场文书
美术指导求职信
2014/03/17 职场文书
社区活动总结报告
2014/05/05 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
开学第一天的感想
2015/08/10 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题