下面的函数实现了一个我们想要的最基本的图片预加载效果

function preloadimages(arr){
    var newimages=[]
    var arr=(typeof arr!="object")? [arr] : arr  //确保参数总是数组
    for (var i=0; i<arr.length; i++){
        newimages[i]=new Image()
        newimages[i].src=arr[i]
    }
}

我们可以通过如下的方式加载我们想要的图片

preloadimages(['1.gif', '2.gif', '3.gif'])

preloadimages(['1.gif', '2.gif', '3.gif']).done(function(images){
 //当图片全部加载完成之后,执行此处的代码
 //images参数是Array类型,对应加载进来的图像
 //images[0] 对应的是第一张图像
})

function preloadimages(arr){

var newimages=[], loadedimages=0
    var postaction=function(){}  //此处增加了一个postaction函数
    var arr=(typeof arr!="object")? [arr] : arr
    function imageloadpost(){
        loadedimages++
        if (loadedimages==arr.length){
            postaction(newimages) //加载完成用我们调用postaction函数并将newimages数组做为参数传递进去
        }
    }
    for (var i=0; i<arr.length; i++){
        newimages[i]=new Image()
        newimages[i].src=arr[i]
        newimages[i].onload=function(){
            imageloadpost()
        }
        newimages[i].onerror=function(){
            imageloadpost()
        }
    }
    return { //此处返回一个空白对象的done方法
        done:function(f){
            postaction=f || postaction
        }
    }
}

上面的代码,我们稍作修改了几个地方:

首先,我们增加了一个postaction函数,该函数被用来做为图片加载完成后的回调函数,用户可以在后面调用的时候用自己的处理函数覆盖掉该函数。

第二,我们的preloadimages()函数返回了一个空对象,其中包含一个简单的done()方法,这是实现本次改造的关键所在,确保了链式调用的实现。

最后,我们的调用变为如下形式

preloadimages(['1.gif', '2.gif', '3.gif']).done(function(images){

alert(images.length) //alerts 3
  alert(images[0].src+" "+images[0].width) //alerts '1.gif 220'
})

js中数组作为参数传递的定义的更多相关文章

  1. JavaScript -- 时光流逝(二):js中数组的方法

    JavaScript -- 知识点回顾篇(二):js中数组的方法 1. 数组 (1)定义数组,数组赋值 <script type="text/javascript"> ...

  2. php和js中数组的总结

      php中数组的表示方法:array()或者[] js中数组的表示方法:new array()或者[] 一.php中初始化命名数组 在PHP中声明数组的方式主要有两种:一是应用array()函数声明 ...

  3. JS中数组的介绍

    一.数组: 一组数据的集合: 二.JS中数组的特点: 1.数组定义时无需指定数据类型: 2.数组定义时可以无需指定数组长度: 3.数组可以存储任何类型的数据: 4.一般是相同的数据类型: 三.数组的创 ...

  4. js中数组去重的几种方法

    js中数组去重的几种方法         1.遍历数组,一一比较,比较到相同的就删除后面的                 function unique(arr){                 ...

  5. js中数组增删查改unshift、push、pop、shift、slice、indexOf、concat、join

    js中数组增删查改unshift.push.pop.shift.slice.indexOf.concat.join

  6. js中数组如何使用

    js中数组如何使用 一.总结 一句话总结:new Array()和[]两种方法都可以创建数组. 二.js中创建数组,并往数组里添加元素 数组的创建 var arrayObj = new Array() ...

  7. js中数组方法大全

    js数组方法大全 一:前言 我们在学到js中数组的时候,我们会接触到js中数组的一些方法,这些方法对我们来说,可以很遍历的达到我们想要的结果,但是因为方法比较多,有些方法也不常用,可能会过一段时间就会 ...

  8. js中数组去重方法及性能对比

    js中数组的 数组去重 常用的数组去重方法以及效率分析: 首先我们先构建一个数组,主要是用于进行去重实验,我们主要实验的量级为1000,10000,100000,500000.具体的生成数组的方法如下 ...

  9. js中数组扁平化处理

随机推荐

  1. Modelsim编译Xilinx器件库的另一种方法

    由 xooo 于 星期五, 09/18/2015 - 15:35 发表 以前在用modelsim对Xilinx进行器件库编译时,我用的比较多的是直接在ISE中编译器件库,感觉很方便简单,就是编译时间有 ...

  2. [svc]运维知识体系及职业

    知识点: 1,运维命令基础 100个命令 三剑客 正则 2,运维基础知识 linux启动 目录结构 常见配置路径 文件属性 链接知识 权限 用户管理 磁盘管理 网络基础(配置ip路由等) 3,基础核心 ...

  3. 【Android】12.0 第12章 Intent及其过滤器—本章示例主界面

    分类:C#.Android.VS2015: 创建日期:2016-02-23 一.简介 这一章我们主要学习Intent的基本用法,并通过例子演示如下功能: 如何启动另一个界面: 如何获取另一个界面的返回 ...

  4. 给class添加id封装

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. sqlserver 关于子查询的优化操作

    在对条件需要用到子查询的时候,通常可以通过连接来代替子查询来完成操作,更加高效 SELECT t1.id,t2.columnName,t2.columnType,t1.rownum,t1.cellVa ...

  6. C#中关于系统用户信息持久化(接上文)

    首先传几张效果图描述一下功能: 经过上文用户名和密码的验证后,就到了添加用户这一步,登陆后的用户可以添加新的用户,被添加的用户可以登陆系统. 这里会用到C#中的“正则表达式”对用户名格式进行判断,以及 ...

  7. mongodb常见管理命令

    ----------1.复制数据库 wind:PRIMARY> show dbs; jinri 0.078GB local 1.078GB test 0.078GB wind 0.078GB w ...

  8. C语言 · 因式分解

    算法提高 8-1因式分解   时间限制:10.0s   内存限制:256.0MB      问题描述 设计算法,用户输入合数,程序输出若个素数的乘积.例如,输入6,输出2*3.输入20,输出2*2*5 ...

  9. SpringMVC 多视图解析器配置以及问题

    在SpringMVC模式当中可以通过如下配置来支持多视图解析 <!-- jsp jstl --> <bean id="JSPViewResolver" class ...

  10. JavaScrip——练习(做悬浮框进一步:悬浮窗后缀悬浮窗【感觉这种方法比较麻烦】)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...