JS 实现图片的预加载(转载)
图片预加载是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 实现图片的预加载(转载)相关推荐
- js虚拟代理实现图片的预加载
<h1>虚拟代理实现图片的预加载</h1><p>在Web开发中,图片预加载是一种常见的技术,如果直接给某个img标签节点这只src属性,由于图片过大或者网络不佳,图 ...
- 关于图片的预加载以及延伸
图片的预加载不难,方式有很多种,本来不打算单独写一篇文章,因为网上有很多大神写的很好,本来转载一篇相关的优质文章就好了.直到我读了一篇文章,发现图片的预加载有不少延伸知识,于是加以整理,有了这篇文章. ...
- Jquery背景图片的预加载
Jquery背景图片的预加载 //定义预加载图片列表的函数(有参数) jQuery.preloadImages = function(){ //遍历图片 for(var i = 0; i&l ...
- 如何使用echo.js实现图片的懒加载(整理)
如何使用echo.js实现图片的懒加载(整理) 一.总结 一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...
- 图片无序预加载技术一
看视频记录一下. 预加载分为无序预加载和有序预加载. demo1.html <!DOCTYPE html> <html lang="en"> <hea ...
- vue项目中使用大图片提前预加载处理方案
目的: 图片预加载能够使得用户在浏览后续页面的时候,不会出现图片加载一半导致浏览不流畅的情况. 方案一 项目打开的时候要对图片进行预加载,在App.vue里面的beforeCreate添加预加载程序 ...
- html图片怎么预加载,如何利用CSS和Javascript实现图片预加载
说到图片预加载,想必大家已经很熟悉了,在平时的项目中,我们常用插件实现预加载,比如:懒加载lazyload插件等等.如果你想了解下lazyload,可以看下这两篇文章: 今天主要想介绍不用插件实现图片 ...
- instant.page —— 一个 JS 脚本实现网站预加载,提升页面加载速度
instant.page 使用即时预加载技术,在用户点击之前预先加载页面.当用户的鼠标悬停在一个链接上超过 65 毫秒时,浏览器会对此页面进行预加载,当用户点击链接后,就从预加载的缓存中直接读取页面内 ...
- 用javascript预加载图片、css、js的方法研究
预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提 ...
最新文章
- HTML 5中SEO可以用那些代码来做优化
- php5.3的新特性
- AtCoder AGC007E Shik and Travel (二分、DP、启发式合并)
- [转].NET 数据库连接池
- PHP通过文件存储来实现缓存
- Android之各个手机版本WiFi热点的创建
- 【C语言】排序(算法基础)
- Msql自定义函数和存储过程
- ffplay播放器原理学习
- CAD:计算三角形的外接圆圆心
- 四旋翼无人机飞控系统设计(闭环控制系统)
- matlab粒子群运动模拟伪代码,基本粒子群优化算法(PSO)的matlab实现
- 创建Image图像的几种方法
- 企业工商信息查询API开发文档
- java.sql.SQLException: Error writing file '/tmp/MY2zYz09' (Errcode: 28 - No space left on device)
- 物联网卡就是不能打电话的电话卡?
- Qt 小例子学习26 - 画网格
- PowerDesigner常见错误
- 年仅22岁的苹果视障工程师正在改变科技世界
- phpMyAdmin 尝试连接到 MySQL 服务器,但服务器拒绝连接。
热门文章
- Sublime Text 3插件收集
- 使用Docker Compose部署基于Sentinel的高可用Redis集群
- Spirng MVC +Velocity 表单绑定命令对象
- [Caffe]:关于*** Aborted at 1479432790 (unix time) try date -d @1479432790 错误的另一种原因
- 插入DLL和挂接API——Windows核心编程学习手札之二十二
- 模糊数学笔记:二、模糊截集与分解定理
- ubuntu中设置mysql的字符集
- java fastjson_java操作json数据之fastjson
- 如何发表cscd核心论文_教育论文发表时几种核心期刊介绍
- 生产上如何设置线程池参数?拒绝策略怎么配?|| Executors 中 JDK 给你提供了,为什么不用??