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

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

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];}
}

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

幸运的是,这个功能实现起来并不难,我们可以使用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 = 0;var arr = (typeof arr != "object") ? [arr] : arr;function imageloadpost(){loadedimages++;if(loadedimages == arr.length){alert("图片已经加载完成");}}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();};}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

转载于:https://www.cnblogs.com/minigrasshopper/p/8065694.html

JS 实现图片的预加载(转载)相关推荐

  1. js虚拟代理实现图片的预加载

    <h1>虚拟代理实现图片的预加载</h1><p>在Web开发中,图片预加载是一种常见的技术,如果直接给某个img标签节点这只src属性,由于图片过大或者网络不佳,图 ...

  2. 关于图片的预加载以及延伸

    图片的预加载不难,方式有很多种,本来不打算单独写一篇文章,因为网上有很多大神写的很好,本来转载一篇相关的优质文章就好了.直到我读了一篇文章,发现图片的预加载有不少延伸知识,于是加以整理,有了这篇文章. ...

  3. Jquery背景图片的预加载

    Jquery背景图片的预加载 //定义预加载图片列表的函数(有参数)  jQuery.preloadImages = function(){   //遍历图片   for(var i = 0; i&l ...

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

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

  5. 图片无序预加载技术一

    看视频记录一下. 预加载分为无序预加载和有序预加载. demo1.html <!DOCTYPE html> <html lang="en"> <hea ...

  6. vue项目中使用大图片提前预加载处理方案

    目的: 图片预加载能够使得用户在浏览后续页面的时候,不会出现图片加载一半导致浏览不流畅的情况. 方案一 项目打开的时候要对图片进行预加载,在App.vue里面的beforeCreate添加预加载程序 ...

  7. html图片怎么预加载,如何利用CSS和Javascript实现图片预加载

    说到图片预加载,想必大家已经很熟悉了,在平时的项目中,我们常用插件实现预加载,比如:懒加载lazyload插件等等.如果你想了解下lazyload,可以看下这两篇文章: 今天主要想介绍不用插件实现图片 ...

  8. instant.page —— 一个 JS 脚本实现网站预加载,提升页面加载速度

    instant.page 使用即时预加载技术,在用户点击之前预先加载页面.当用户的鼠标悬停在一个链接上超过 65 毫秒时,浏览器会对此页面进行预加载,当用户点击链接后,就从预加载的缓存中直接读取页面内 ...

  9. 用javascript预加载图片、css、js的方法研究

    预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提 ...

最新文章

  1. HTML 5中SEO可以用那些代码来做优化
  2. php5.3的新特性
  3. AtCoder AGC007E Shik and Travel (二分、DP、启发式合并)
  4. [转].NET 数据库连接池
  5. PHP通过文件存储来实现缓存
  6. Android之各个手机版本WiFi热点的创建
  7. 【C语言】排序(算法基础)
  8. Msql自定义函数和存储过程
  9. ffplay播放器原理学习
  10. CAD:计算三角形的外接圆圆心
  11. 四旋翼无人机飞控系统设计(闭环控制系统)
  12. matlab粒子群运动模拟伪代码,基本粒子群优化算法(PSO)的matlab实现
  13. 创建Image图像的几种方法
  14. 企业工商信息查询API开发文档
  15. java.sql.SQLException: Error writing file '/tmp/MY2zYz09' (Errcode: 28 - No space left on device)
  16. 物联网卡就是不能打电话的电话卡?
  17. Qt 小例子学习26 - 画网格
  18. PowerDesigner常见错误
  19. 年仅22岁的苹果视障工程师正在改变科技世界
  20. phpMyAdmin 尝试连接到 MySQL 服务器,但服务器拒绝连接。

热门文章

  1. Sublime Text 3插件收集
  2. 使用Docker Compose部署基于Sentinel的高可用Redis集群
  3. Spirng MVC +Velocity 表单绑定命令对象
  4. [Caffe]:关于*** Aborted at 1479432790 (unix time) try date -d @1479432790 错误的另一种原因
  5. 插入DLL和挂接API——Windows核心编程学习手札之二十二
  6. 模糊数学笔记:二、模糊截集与分解定理
  7. ubuntu中设置mysql的字符集
  8. java fastjson_java操作json数据之fastjson
  9. 如何发表cscd核心论文_教育论文发表时几种核心期刊介绍
  10. 生产上如何设置线程池参数?拒绝策略怎么配?|| Executors 中 JDK 给你提供了,为什么不用??