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 相关文章推荐
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
Mac/Windows下如何安装Node.js
Nov 22 Javascript
JQuery弹出层示例可自定义
May 19 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
AngularJS 整理一些优化的小技巧
Aug 18 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 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
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
小程序api实现promise封装过程解析
2019/11/21 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
Python多进程原理与用法分析
2018/08/21 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
python3 字符串知识点学习笔记
2020/02/08 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
2014年护理部工作总结
2014/11/14 职场文书
房产证明范本
2015/06/19 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
创业计划书之酒店
2019/08/30 职场文书
德劲DE1102数字调谐收音机机评
2022/04/07 无线电
Python经常使用的一些内置函数
2022/04/11 Python