图片预加载是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];
}
}

上面的方法已经可以满足我们最基本的预加载图片的效果了,但情况往往并不如此,我们往往需要确切的知道图像是否被真正加载完成,并可能在后续执行一系列对图片的操作功能。

幸运的是,这个功能实现起来并不难,我们可以使用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 = [];
var 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();
};
}
}

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

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

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

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

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

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

function preloadimages(arr){
var newimages = [];
var 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(fun){
postaction = fun || postaction;
}
}
}

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

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

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

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

preloadimages(['1.gif', '2.gif', '3.gif']).done(function(images){
alert(images.length); //alerts 3
});

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

JS 实现图片的预加载(转载)的更多相关文章

  1. 如何使用echo.js实现图片的懒加载(整理)

    如何使用echo.js实现图片的懒加载(整理) 一.总结 一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...

  2. jquery.lazyload.js图片延迟加载(懒加载)--转载

    一.插件介绍 jquery.lazyload.js 是一个用 JavaScript 编写的jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动 ...

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

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

  4. Javascript实现图片的预加载的完整实现

    图片预加载是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实现图片的懒加载

    原文地址:https://blog.phyer.cn/article/9277.欢迎大家访问我的博客(●ˇ∀ˇ●) // 防抖 let lazy_timer; window.addEventListe ...

随机推荐

  1. Reminders在电商推荐中的价值

    原论文在UMAP'16.文章并没有太高深的模型,比较接地气:但其观点与结论很独到,并且在工业界具有很强的实际操作价值. 针对推荐系统的研究大多关注在挖掘用户并不知道但是却与其兴趣相关的物品.不过每个推 ...

  2. Backtrack无线攻防(很任性的一篇)

    首先你得有一个backtrack操作系统 然后还得花钱买一个无线网卡,最好是Intel的,还有要是USB接口的,可能是因为其他接口我不会接.

  3. Cocos2d-x 3.2Lua演示样例UserDefaultTest(用户默认配置)

    Cocos2d-x 3.2演示样例UserDefaultTest(用户默认配置) 本篇博客介绍Cocos2d-x 3.2演示样例中的UserDefaulstTest,我们在开发中可能须要用到一些默认配 ...

  4. HBase1.0.1基本操作(java代码)

    public class HQuery { private static ConnHBase connHbase=new ConnHBase(); /***************建表******** ...

  5. bootstarp模板02

    HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="ut ...

  6. Django安装与开发虚拟环境搭建01

    Django是一款基于python的MVT的web开发框架(m表示model,主要用于对数据库层的封装  ,v表示view,用于向用户展示结果,c表示controller,是核心,用于处理请求.获取数 ...

  7. Apache反向代理的配置

    Apache反向代理的配置 一: Mac系统自带apache服务器 1. 查看apache版本命令如下:   sudo apachectl -v 2. 启动apache   sudo apachect ...

  8. idea和Webstorm上使用git和github,码云

    由于之前一直使用svn,现在项目使用git,顾根据网上找的学习资料,自己梳理了下,收获蛮多,这里做个记录,如果能帮助到您那是最好不过的. 1.大致步骤 使用工具:idea,github,码云 webs ...

  9. HTML基础教程-元素

    HTML 元素 HTML 文档是由 HTML 元素定义的. HTML 元素 HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码. 注释:开始标签常被称为开放标签 ...

  10. 解决IOS iframe不滚动问题

    .frameBox{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; -webkit-overflow-scrolling: touch; ...