图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作。今天我们将来实现一个完整的图片预加载和处理图片加载后执行后续操作的代码。

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

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

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

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

上面的方法已经可以满足我们最基本的预加载图片的效果了,但情况往往并不如此,我们往往需要确切的知道图像是否被真正加载完成,并可能在后续执行一系列对图片的操作功能。幸运的是,这个功能实现起来并不难,我们可以使用onload和onerror事件去处理决定图片是否加载完成(或者失败)。在本文的最终实现代码中,我们将会把proloadimages()函数改造成如下的样子。

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

首先我们用image对象的onload和onerror事件处理函数来检测图片的加载情况(成功或失败),改造后的代码如下。

function preloadimages(arr){
var newimages=[], loadedimages=
var arr=(typeof arr!="object")? [arr] : arr
function imageloadpost(){
loadedimages++
if (loadedimages==arr.length){
alert("图片已经加载完成")
}
}
for (var i=; i<arr.length; i++){
newimages[i]=new Image()
newimages[i].src=arr[i]
newimages[i].onload=function(){
imageloadpost()
}
newimages[i].onerror=function(){
imageloadpost()
}
}
}

我们可以使用代码2的调用方法测试该函数,当图片全部加载完成(成功或失败)后,浏览器将会弹出“图片已经加载完成”的消息。

现在,我们将为preloadimages()函数增加一个回调函数来处理后续的操作

通常我们会为我们的preloadimages()函数增加一个匿名函数做为参数,来完成我们需要的功能。如此之后,我们调用preloadimages()函数的代码可能会如下面这样。

preloadimages(imagesarray, function(){
//图片加载完成之后执行的操作
})

但是我们现在来做一点点改变,让代码看起来更直观,更易于理解,改造完成之后,preloadimages()函数的调用看起来如下所示。

preloadimages(imagesarray).done(function(){
//图片加载完成后的操作
})

上面这种写法大家一看一定都会觉得非常清晰明了,那么接下来,我们继续来改造我们的preloadimages()函数。

function preloadimages(arr){   

    var newimages=[], loadedimages=
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=; 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[].src+" "+images[].width) //alerts '1.gif 220'
})

当然,我们还可以在done()里实现各种我们需要的图片操作!

Javascript实现图片的预加载的完整实现的更多相关文章

  1. [转]Javascript实现图片的预加载详解

    下面的函数实现了一个我们想要的最基本的图片预加载效果 function preloadimages(arr){ var newimages=[] var arr=(typeof arr!=" ...

  2. CSS和JavaScript以及Ajax实现预加载图片的方法及优缺点分析

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画 廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发 ...

  3. JavaScript判断图片是否已经加载完毕的方法汇总

    在网上有很多关于判断图片是否已经加载完毕的文章,但是有的浏览器并不适合,下面小编给大家分享一些有关JavaScript判断图片是否已经加载完毕方法汇总,具体内容如下所示: 一.onload事件 通过监 ...

  4. JS 实现图片的预加载(转载)

    图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作. 下面的函数实现了一个我 ...

  5. 用promise做图片的预加载

    var url='jsonp-master/0.jpg' var url1='jsonp-master/1.jpg' var url2='jsonp-master/2.jpg' var img=doc ...

  6. Jquery实现图片的预加载与延时加载

    有很多项目经常会需要判断图片加载完成后执行相应的操作,或者需要图片延迟加载,网上虽然已经有很不错的插件,但要为这些效果还得单独加载一个插件的话总感觉有点不舒服,干脆自己写了个方法: 1 2 3 4 5 ...

  7. ajax点击加载更多数据图片(预加载)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. flex 实现图片播放 方案一 图片全部预加载放内存

    这种方案,对于web的应用有局限性,在图片量比较多,比较大的时候,就会爆浏览器异常.一般建议轻量级的采用这种方案. <?xml version="1.0" encoding= ...

  9. js图片预加载

    图片预加载有大体有几种方式 1.html标签或css加载图片. 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载.但是为了避免初次载入过多图片影响体验 ...

随机推荐

  1. 缺省模板参数(借助标准模板容器实现Stack模板)、成员模板、关键字typename

    一.缺省模板参数 回顾前面的文章,都是自己管理stack的内存,无论是链栈还是数组栈,能否借助标准模板容器管理呢?答案是肯定的,只需要多传一个模板参数即可,而且模板参数还可以是缺省的,如下: temp ...

  2. tp类型自动转换和自动完成

    一.类型自动转换 在模型中对数据库字段自动完成 //模型中数据类型自动转换 添加一个$type数组即可protected $type=array( 'username'=>'serialize' ...

  3. express 设置header解决跨域问题

    //设置跨域访问 app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", ...

  4. scrapy添加 请求头

    直接在 setting 文件中添加

  5. 并发登录人数控制--Shiro系列(二)

    为了安全起见,同一个账号理应同时只能在一台设备上登录,后面登录的踢出前面登录的.用Shiro可以轻松实现此功能. shiro中sessionManager是专门作会话管理的,而sessinManage ...

  6. UIImageView的一些用法

    转自:http://blog.sina.com.cn/s/blog_60e2dbcf01014bfm.html //初始化 UIImageView  *imageView=[[UIImageView ...

  7. CXF 入门:创建一个基于SOAPHeader的安全验证(CXF拦截器使用)

    CXF拦截器使用,创建一个使用SOAPHeader的安全验证xml格式: <soap:Header> <auth:authentication xmlns:auth="ht ...

  8. cocos2dx遇到的一些坑

    针对2.x 1.CCSprite无法直接用文件名更换图片,可以添加如下函数 bool CCSprite::setWithFile(const char *pszFilename) { CCAssert ...

  9. Redis常用命令解析——INFO, MONITOR, SLOWLOG

    1. INFO info指令返回服务器相关信息,包括: server: General information about the Redis server clients: Client conne ...

  10. 框架Iframe的退出,IE 火狐都没问题 到360就不跳转页面 刷新一遍才跳转到登录页

    遇到这种情况 ,郁闷死了,来回折腾好几种跳转方法,最后有一个灵感,当我点击退出按钮的时候,我是用jquery $("#ID").click(function(){}) 这种方法异步 ...