javascript顺序加载图片的方法

本文实例讲述了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程序设计有所帮助。

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
运用canvas做的简单刮刮卡效果,每次刷新可重新测试 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=UTF-
本文实例讲述了异步安全加载javascript文件的方法。分享给大家供大家参考。具体如下: 使用方法: (function() { __safeLoadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", function() { alert(jQuery); });})(); JavaScript实现代码: window.__safeLoadScript = function(src, callback) {
localStorage 应是家喻户晓的?但本地存储这个家族可远不止它。以前扯过 sessionStorage,现在还有个神奇的 CacheStorage。它用来存储 Response 对象的。也就是说用来对 HTTP ,响应做缓存的。虽然 localStorage 也能做,但是它可能更专业。 CacheStorage 在浏览器上的引用名叫 caches 而不是驼峰写法的 cacheStorage,它定义在 ServiceWorker 的规范中。CacheStorage 是多个 Cache 的集合,而每个
下面把jQuery获取页面及个元素高度、宽度的方法汇总,分享给大家。 获取浏览器显示区域(可视区域)的高度 : 复制代码 代码如下: $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : 复制代码 代码如下: $(window).width(); 获取页面的文档高度 复制代码 代码如下: $(document).height(); 获取页面的文档宽度 : 复制代码 代码如下: $(document).width(); 浏览器当前窗口文档body的高度: 复制代码 代码如下: $
只要有玩过 nodejs,那就一定接触过 Writable。http 模块的请求回调参数中的 res 参数就是一个 Writable 对象。我们经常会往上面 write 一堆东西,最后调用个 end 方法吧?这些都属于 Writable 的行为。 我们手动创建的 Writable 对象是交给用户使用的,那么 write 和 end 方法都是用户调用的。作为提供方,我们如何知道自己的 Writable 对象被用户执行了什么操作呢?就猜这个 API 吧,我首先会猜到某个事件。然而并不是!同 Readable
下面是保存一个图片为示例,代码来源于网络,希望能够给大家带来一定的帮助,代码如下: script type="text/javascript" function saveFile(imgUrl) { var oPop=window.open(imgUrl,"","width=1, height=1, top=5000, left=5000"); for(;oPop.document.readyState != "complete"; ) { if(oPop.document.readyState=="co
parse用于从一个字符串中解析出json对象,如 var str = '{"name":"huangxiaojian","age":"23"}' 结果: JSON.parse(str)Objectage: "23"name: "huangxiaojian"__proto__: Object 注意:单引号写在{}外,每个属性名都必须用双引号,否则会抛出异常。 stringify()用于从一个对象解析出字符串,如 var a = {a:1,b:2} 结果: JSON.stringify(a)"{"a":1,

简单的jQuery入门指引 - 2015-07-30 19:07:06

本文实例讲述了jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法。分享给大家供大家参考。具体如下: 鼠标滑向当前图片高亮显示,其它图片变灰 这个 网页特效一些商城经常用到比如淘宝,当用户鼠标移到某一个图片时候变亮 周围图片变灰,形成对比增加用户体验 这个jquery特效的原理是:鼠标滑过当前元素,找到他的同辈元素i,并为它加上opacity_bg类,鼠标移出当前元素,到他的同辈元素i,并移除它加上opacity_bg类景 核心js代码如下: $(document).ready(function
本文将简单介绍JavaScript中一些常用对象的属性和方法,以及几个有用的系统函数。 一、串方法 JavaScript有强大的串处理功能,有了这些串方法,才能编写出丰富多彩的网页。在这一部分里,我们将介绍到如何使用与串对象有关的方法和属性。 1.串对象的length属性 串对象仅有一个属性length,这个属性值表示这个串所包括字符的相对数目。语法为: stringName.length 2.串对象的方法 JavaScript提供了多个串方法以帮助控制显示信息。串方法可以分为几个大类,如属性方法、导航方法