位置: 编程技术 - 正文
JavaScript前端图片加载管理器imagepool使用详解(前端实现图片编辑)
编辑：rootadmin推荐整理分享JavaScript前端图片加载管理器imagepool使用详解(前端实现图片编辑)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:前端显示图片用什么方法,javascript 前端,前端图片,前端显示图片用什么方法,javascript 前端,web前端图片,web前端图片,前端图片,内容如对您有帮助，希望把文章链接给更多的朋友！
前言
imagepool是一款管理图片加载的JS工具，通过imagepool可以控制图片并发加载个数。
对于图片加载，最原始的方式就是直接写个img标签，比如：<img src="图片url" />。
经过不断优化，出现了图片延迟加载方案，这回图片的URL不直接写在src属性中，而是写在某个属性中，比如：<img src="" data-src="图片url" />。这样浏览器就不会自动加载图片，等到一个恰当的时机需要加载了，则用js把data-src属性中的url放到img标签的src属性中，或者读出url后，用js去加载图片，加载完成后再设置src属性，显示出图片。
这看起来已经控制的很好了，但依然会有问题。
虽然能做到只加载一部分图片，但这一部分图片，仍然可能是一个比较大的数量级。
这对于PC端来说，没什么大不了，但对于移动端，图片并发加载数量过多，极有可能引起应用崩溃。
因此我们迫切需要一种图片缓冲机制，来控制图片加载并发。类似于后端的数据库连接池，既不会创建过多连接，又能充分复用每一个连接。
至此，imagepool诞生了。
拙劣的原理图
使用说明
首先要初始化连接池：
var imagepool = initImagePool(5); initImagePool 是全局方法，任何地方都可以直接使用。作用是创建一个连接池，并且可以指定连接池的最大连接数，可选，默认为5。
在同一个页面中，多次调用initImagePool均返回同一个核心实例，永远是第一个，有点单例的感觉。比如：
此时imagepool1和imagepool2的最大连接数均为3，内部使用的是同一个核心实例。注意，是内部的核心相同，并不是说imagepool1 === imagepool2。
初始化之后，就可以放心大胆的加载图片了。
最简单的调用方法如下：
直接在实例上调用load方法即可。
load方法有两个参数。第一个参数是需要加载的图片url，第二个参数是各种选项，包含了成功、失败的回调，回调时会传入图片url。
这样写只能传入一张图片，因此，也可以写成如下形式：
通过传入一个图片url数组，就可以传入多个图片了。
每一个图片加载成功(或失败)，都会调用success(或error)方法，并且传入对应的图片url。
但有时候我们并不需要这样频繁的回调，传入一个图片url数组，当这个数组中所有的图片都处理完成后，再回调就可以了。
只需加一个选项即可：
通过在选项中加一个once属性，并设置为true，即可实现只回调一次。
这一次回调，必然回调success方法，此时error方法是被忽略的。
此时回调success方法，不再是传入一个图片url参数，而是传入三个参数，分别为：成功的url数组、失败的url数组、总共处理的图片个数。
此外，还有一个方法可以获取连接池内部状态：
通过调用info方法，可以得到当前时刻连接池内部状态，数据结构如下：
Object.task.count 连接池中等待处理的任务数量 Object.thread.count 连接池最大连接数 Object.thread.free 连接池空闲连接数 建议不要频繁调用此方法。
最后需要说明的是，如果图片加载失败，最多会尝试3次，如果最后还是加载失败，才回调error方法。尝试次数可在源码中修改。
最最后再强调一下，读者可以尽情的往连接池中push图片，完全不必担心并发过多的问题，imagepool会有条不絮的帮你加载这些图片。
最最最后，必须说明的是，imagepool理论上不会降低图片加载速度，只不过是平缓的加载。
源码
标签: 前端实现图片编辑
本文链接地址:https://www.jiuchutong.com/biancheng/383835.html 转载请保留说明！
