คำนำ
ImagePool เป็นเครื่องมือ JS สำหรับการจัดการการโหลดภาพ ImagePool สามารถควบคุมจำนวนการโหลดภาพที่เกิดขึ้นพร้อมกัน
สำหรับการโหลดรูปภาพวิธีดั้งเดิมที่สุดคือการเขียนแท็ก IMG โดยตรงเช่น: <img src = "image url" />
หลังจากการเพิ่มประสิทธิภาพอย่างต่อเนื่องรูปแบบการโหลดการหน่วงของภาพจะปรากฏขึ้น เวลานี้ URL ของภาพไม่ได้เขียนโดยตรงในแอตทริบิวต์ SRC แต่ในแอตทริบิวต์บางอย่างเช่น: <img src = "" data-src = "image url" /> ด้วยวิธีนี้เบราว์เซอร์จะไม่โหลดรูปภาพโดยอัตโนมัติ เมื่อต้องการเวลาที่เหมาะสมให้ใช้ JS เพื่อใส่ URL ในแอตทริบิวต์ Data-SRC ลงในแอตทริบิวต์ SRC ของแท็ก IMG หรือหลังจากอ่าน URL ให้ใช้ JS เพื่อโหลดรูปภาพและตั้งค่าแอตทริบิวต์ SRC หลังจากโหลดและแสดงภาพ
สิ่งนี้ดูเหมือนจะควบคุมได้ดี แต่จะยังคงมีปัญหา
แม้ว่ามันจะสามารถโหลดส่วนหนึ่งของภาพได้ แต่ส่วนหนึ่งของภาพนี้อาจยังคงมีขนาดค่อนข้างใหญ่
นี่ไม่ใช่เรื่องใหญ่สำหรับด้านพีซี แต่สำหรับมือถือจะมีการโหลดภาพพร้อมกันมากเกินไปซึ่งมีแนวโน้มที่จะทำให้แอปพลิเคชันล่ม
ดังนั้นเราจึงจำเป็นต้องมีกลไกการบัฟเฟอร์ภาพเพื่อควบคุมการโหลดภาพพร้อมกัน คล้ายกับพูลการเชื่อมต่อฐานข้อมูลแบ็กเอนด์มันไม่ได้สร้างการเชื่อมต่อมากเกินไปและสามารถนำการเชื่อมต่อกลับมาใช้ใหม่ได้อย่างสมบูรณ์
เมื่อมาถึงจุดนี้ ImagePool ก็เกิด
แผนผังแผนผังที่ไม่ดี
คำแนะนำสำหรับการใช้งาน
ขั้นแรกให้เริ่มต้นพูลการเชื่อมต่อ:
var imagePool = initimagePool (5);
InitimagePool เป็นวิธีการระดับโลกที่สามารถใช้โดยตรงได้ทุกที่ ฟังก์ชั่นคือการสร้างพูลการเชื่อมต่อและคุณสามารถระบุจำนวนสูงสุดของการเชื่อมต่อกับพูลการเชื่อมต่อโดยทางเลือกค่าเริ่มต้นคือ 5
ในหน้าเดียวกันการโทรหลายครั้งไปยัง initimagepool ส่งคืนอินสแตนซ์หลักเดียวกันซึ่งเป็นครั้งแรกเสมอด้วยความรู้สึกซิงเกิลนิดหน่อย ตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
var imagePool1 = initimagePool (3);
var imagePool2 = initimagePool (7);
ในเวลานี้จำนวนการเชื่อมต่อสูงสุดระหว่าง ImagePool1 และ ImagePool2 คือ 3 และใช้อินสแตนซ์หลักเดียวกันภายใน โปรดทราบว่าแกนภายในนั้นเหมือนกันไม่ใช่ imagePool1 === imagePool2
หลังจากเริ่มต้นคุณสามารถโหลดรูปภาพด้วยความมั่นใจ
วิธีที่ง่ายที่สุดในการโทรมีดังนี้:
การคัดลอกรหัสมีดังนี้:
var imagePool = initimagePool (10);
imagePool.load ("image url", {
ความสำเร็จ: ฟังก์ชั่น (src) {
console.log ("ความสำเร็จ :::::"+src);
-
ข้อผิดพลาด: ฟังก์ชัน (src) {
console.log ("ข้อผิดพลาด ::::"+src);
-
-
เพียงเรียกใช้วิธีการโหลดบนอินสแตนซ์
วิธีการโหลดมีพารามิเตอร์สองตัว พารามิเตอร์แรกคือ URL รูปภาพที่ต้องโหลดและพารามิเตอร์ที่สองเป็นตัวเลือกต่าง ๆ รวมถึงการโทรกลับที่ประสบความสำเร็จและล้มเหลว URL รูปภาพจะถูกส่งผ่านในระหว่างการโทรกลับ
ด้วยวิธีนี้คุณสามารถผ่านภาพเดียวเท่านั้นดังนั้นจึงสามารถเขียนในรูปแบบต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
var imagePool = initimagePool (10);
ImagePool.load (["Image 1url", "Image 2Url"], {
ความสำเร็จ: ฟังก์ชั่น (src) {
console.log ("ความสำเร็จ :::::"+src);
-
ข้อผิดพลาด: ฟังก์ชัน (src) {
console.log ("ข้อผิดพลาด ::::"+src);
-
-
โดยผ่านอาร์เรย์ URL รูปภาพคุณสามารถผ่านหลายภาพได้
เมื่อภาพแต่ละภาพถูกโหลดสำเร็จ (หรือล้มเหลว) วิธีการประสบความสำเร็จ (หรือข้อผิดพลาด) จะถูกเรียกและ URL รูปภาพที่เกี่ยวข้องจะถูกส่งผ่าน
แต่บางครั้งเราไม่จำเป็นต้องโทรกลับเช่นนี้บ่อยครั้ง ผ่านอาร์เรย์ URL รูปภาพ เมื่อภาพทั้งหมดในอาร์เรย์นี้ถูกประมวลผลการโทรกลับก็เพียงพอแล้ว
เพียงเพิ่มหนึ่งตัวเลือก:
การคัดลอกรหัสมีดังนี้:
var imagePool = initimagePool (10);
ImagePool.load (["Image 1url", "Image 2Url"], {
ความสำเร็จ: ฟังก์ชั่น (sarray, earray, count) {
console.log ("sarray ::::"+sarray);
console.log ("earray ::::"+earray);
console.log ("นับ :::::"+นับ);
-
ข้อผิดพลาด: ฟังก์ชัน (src) {
console.log ("ข้อผิดพลาด ::::"+src);
-
ครั้งหนึ่ง: จริง
-
โดยการเพิ่มแอตทริบิวต์ครั้งเดียวลงในตัวเลือกและตั้งค่าเป็นจริงคุณสามารถโทรกลับได้เพียงครั้งเดียว
เวลานี้วิธีการประสบความสำเร็จจะต้องถูกเรียกกลับและวิธีการข้อผิดพลาดจะถูกละเว้นในเวลานี้
ในเวลานี้วิธีความสำเร็จในการโทรกลับจะไม่ผ่านพารามิเตอร์ URL รูปภาพอีกต่อไป แต่ผ่านพารามิเตอร์สามตัว ได้แก่ : อาร์เรย์ URL ที่ประสบความสำเร็จ, อาร์เรย์ URL ที่ล้มเหลวและจำนวนภาพทั้งหมดที่ประมวลผล
นอกจากนี้ยังมีวิธีที่จะได้รับสถานะภายในของกลุ่มการเชื่อมต่อ:
การคัดลอกรหัสมีดังนี้:
var imagePool = initimagePool (10);
console.log (imagepool.info ());
โดยการโทรหาวิธีการข้อมูลคุณสามารถรับสถานะภายในของกลุ่มการเชื่อมต่อในเวลาปัจจุบันและโครงสร้างข้อมูลมีดังนี้:
Object.task.count จำนวนงานที่รอการประมวลผลในกลุ่มการเชื่อมต่อ
Object.thread.count จำนวนสูงสุดของการเชื่อมต่อไปยังกลุ่มการเชื่อมต่อ
Object.thread.free จำนวนการเชื่อมต่อฟรีไปยังกลุ่มการเชื่อมต่อ
ขอแนะนำไม่ให้เรียกวิธีนี้บ่อยๆ
ในที่สุดก็ควรสังเกตว่าหากภาพไม่สามารถโหลดได้มันจะพยายามอย่างมาก 3 ครั้ง หากภาพไม่สามารถโหลดได้ในที่สุดวิธีการข้อผิดพลาดจะถูกเรียกกลับ จำนวนความพยายามสามารถแก้ไขได้ในซอร์สโค้ด
ในที่สุดขอให้ฉันเน้นว่าผู้อ่านสามารถผลักดันภาพเข้าไปในกลุ่มการเชื่อมต่อให้มากที่สุดโดยไม่ต้องกังวลเกี่ยวกับการพร้อมกันมากเกินไป ImagePool จะช่วยให้คุณโหลดภาพเหล่านี้เป็นระเบียบ
ในที่สุดก็ต้องสังเกตว่า ImagePool จะไม่ลดความเร็วในการโหลดภาพในทางทฤษฎีมันเป็นเพียงการโหลดที่ราบรื่น
รหัสต้นฉบับ
การคัดลอกรหัสมีดังนี้:
(ฟังก์ชั่น (การส่งออก) {
//เดี่ยว
var อินสแตนซ์ = null;
var emportfn = function () {};
// การกำหนดค่าเริ่มต้นเริ่มต้น
var config_default = {
// จำนวน "เธรด" ในพูลเธรด
กระทู้: 5,
// จำนวนการลองใหม่ไม่สามารถโหลดรูปภาพได้
// ลองสองครั้งเพิ่มต้นฉบับรวม 3 ครั้ง
"ลอง": 2
-
//เครื่องมือ
var _helpers = {
// ตั้งค่าแอตทริบิวต์ DOM
setattr: (function () {
var img = ภาพใหม่ ();
// ตัดสินว่าเบราว์เซอร์รองรับชุดข้อมูล HTML5 หรือไม่
if (img.dataset) {
return function (dom, ชื่อ, ค่า) {
dom.dataset [ชื่อ] = ค่า;
ค่าส่งคืน;
-
}อื่น{
return function (dom, ชื่อ, ค่า) {
dom.setAttribute ("data-"+ชื่อค่า);
ค่าส่งคืน;
-
-
-
// รับแอตทริบิวต์ DOM
getAttr: (function () {
var img = ภาพใหม่ ();
// ตัดสินว่าเบราว์เซอร์รองรับชุดข้อมูล HTML5 หรือไม่
if (img.dataset) {
ฟังก์ชั่นส่งคืน (DOM, ชื่อ) {
ส่งคืน dom.dataset [ชื่อ];
-
}อื่น{
ฟังก์ชั่นส่งคืน (DOM, ชื่อ) {
return dom.getAttribute ("data-"+ชื่อ);
-
-
-
-
-
* วิธีการสร้าง
* @param สูงสุดจำนวนการเชื่อมต่อ ค่า.
-
ฟังก์ชั่น ImagePool (สูงสุด) {
// จำนวนสูงสุดพร้อมกัน
this.max = สูงสุด || config_default.thread;
this.linkhead = null;
this.linkNode = null;
// กำลังโหลดพูล
// [{img: dom, ฟรี: จริง, โหนด: โหนด}]
// โหนด
// {src: "", ตัวเลือก: {ความสำเร็จ: "fn", ข้อผิดพลาด: "fn", ครั้งเดียว: true}, ลอง: 0}
this.pool = [];
-
-
* การเริ่มต้น
-
imagePool.prototype.initPool = function () {
var i, img, obj, _s;
_s = สิ่งนี้;
สำหรับ (i = 0; i <this.max; i ++) {
obj = {};
img = ภาพใหม่ ();
_helpers.setattr (img, "id", i);
img.onload = function () {
var id, src;
// โทรกลับ
//_s.getNode( This).options.success.call(null, this.src);
_s.notice (_s.getNode (นี่), "ความสำเร็จ", this.src);
// งานประมวลผล
_s.executelink (นี่);
-
img.onerror = function (e) {
var node = _s.getNode (นี่);
// ตัดสินจำนวนความพยายาม
if (node.try <config_default.try) {
node.try = node.try + 1;
// เพิ่มในตอนท้ายของรายการงานอีกครั้ง
_s.appendNode (_s.createnode (node.src, node.options, node.notice, node.group, node.try);
}อื่น{
// ข้อผิดพลาดการโทรกลับ
//node.options.error.call(null, this.src);
_s.notice (โหนด, "ข้อผิดพลาด", this.src);
-
// งานประมวลผล
_s.executelink (นี่);
-
obj.img = img;
obj.free = true;
this.pool.push (obj);
-
-
-
* การห่อหุ้มการโทรกลับ
* @param โหนดโหนด วัตถุ.
* สถานะสถานะ @param สตริง ค่าเสริม: ความสำเร็จ | ข้อผิดพลาด (ล้มเหลว)
* @Param SRC Path Path สตริง
-
imagePool.prototype.notice = function (โหนด, สถานะ, src) {
Node.Notice (สถานะ, SRC);
-
-
* การประมวลผลงานรายการที่เชื่อมโยง
* @param dom image image วัตถุ วัตถุ.
-
imagePool.prototype.executelink = function (dom) {
// แยกแยะว่ามีโหนดในรายการที่เชื่อมโยงหรือไม่
if (this.linkhead) {
// โหลดภาพถัดไป
this.setSrc (dom, this.linkhead);
// ลบส่วนหัวลิงค์
this.shiftNode ();
}อื่น{
// ตั้งค่าสถานะของคุณเองให้ไม่ได้ใช้งาน
this.status (dom, true);
-
-
-
* รับ "เธรด" ไม่ได้ใช้งาน
-
imagePool.prototype.getFree = function () {
ความยาว var, i;
สำหรับ (i = 0, length = this.pool.length; i <length; i ++) {
if (this.pool [i] .free) {
ส่งคืนสิ่งนี้ส. ล [i];
-
-
คืนค่า null;
-
-
* ห่อหุ้มการตั้งค่าแอตทริบิวต์ SRC
* เนื่องจากการเปลี่ยนแอตทริบิวต์ SRC นั้นเทียบเท่ากับการโหลดรูปภาพ
* @param dom image image วัตถุ วัตถุ.
* @param โหนดโหนด วัตถุ.
-
imagePool.prototype.setsrc = function (dom, node) {
// ตั้งค่า "เธรด" ในพูลให้ไม่ได้
this.status (dom, false);
// โหนดในเครือ
this.setNode (dom, node);
// โหลดรูปภาพ
dom.src = node.src;
-
-
* อัปเดตสถานะ "เธรด" ในพูล
* @param dom image image วัตถุ วัตถุ.
* สถานะสถานะ @param บูลีน ค่าเสริม: จริง (ไม่ได้ใช้งาน) | เท็จ (ไม่ใช่ IDLE)
-
imagePool.prototype.status = function (dom, สถานะ) {
var id = _helpers.getattr (dom, "id");
this.pool [id] .free = สถานะ;
// สถานะว่างให้ล้างโหนดที่เกี่ยวข้อง
ถ้า (สถานะ) {
this.pool [id] .node = null;
-
-
-
* อัปเดตโหนดที่เกี่ยวข้องของ "เธรด" ในพูล
* @param dom image image วัตถุ วัตถุ.
* @param โหนดโหนด วัตถุ.
-
imagePool.prototype.setNode = function (dom, node) {
var id = _helpers.getattr (dom, "id");
this.pool [id] .node = node;
ส่งคืนสิ่งนี้พูล [id] .node === โหนด;
-
-
* รับโหนดที่เกี่ยวข้องของ "เธรด" ในพูล
* @param dom image image วัตถุ วัตถุ.
-
imagePool.prototype.getNode = function (dom) {
var id = _helpers.getattr (dom, "id");
ส่งคืนสิ่งนี้ส. ล [id] .node;
-
-
* อินเทอร์เฟซภายนอกโหลดรูปภาพ
* @Param SRC สามารถเป็นสตริง SRC หรืออาร์เรย์ของสตริง SRC
* @Param ตัวเลือกพารามิเตอร์ที่ผู้ใช้กำหนด รวมถึง: การโทรกลับที่ประสบความสำเร็จการโทรกลับข้อผิดพลาดเมื่อแท็ก
-
imagePool.prototype.load = function (src, ตัวเลือก) {
var srcs = []
ฟรี = null,
ความยาว = 0,
i = 0,
// เริ่มต้นกลยุทธ์การโทรกลับหนึ่งครั้งเพียงครั้งเดียว
ประกาศ = (ฟังก์ชัน () {
if (opptionss.once) {
ฟังก์ชั่นส่งคืน (สถานะ, src) {
var g = this.group,
o = this.options;
//บันทึก
G [สถานะ] .PUSH (SRC);
// แยกแยะว่ามีการดำเนินการใหม่ทั้งหมดหรือไม่
if (g.success.length + g.error.length === g.count) {
// asynchronous
// ในความเป็นจริงมันถูกดำเนินการแยกต่างหากเป็นงานอื่นเพื่อป้องกันไม่ให้ฟังก์ชั่นการโทรกลับจากการดำเนินการนานเกินไปและส่งผลต่อความเร็วในการโหลดภาพ
settimeout (function () {
O.Success.Call (NULL, G.Success, G.Error, G.Count);
}, 1);
-
-
}อื่น{
ฟังก์ชั่นส่งคืน (สถานะ, src) {
var o = this.options;
// การโทรกลับโดยตรง
settimeout (function () {
o [สถานะ]. call (null, src);
}, 1);
-
-
-
กลุ่ม = {
นับ: 0,
ความสำเร็จ: [],
ข้อผิดพลาด: []
-
โหนด = null;
ตัวเลือก = ตัวเลือก || -
ตัวเลือก SUCCESS = OPTIONS.Success || emptyfn;
ตัวเลือก error = opotions.error || emptyfn;
srcs = srcs.concat (src);
// ตั้งค่าจำนวนองค์ประกอบกลุ่ม
group.count = srcs.length;
// เดินทางผ่านรูปภาพที่ต้องโหลด
สำหรับ (i = 0, length = srcs.length; i <length; i ++) {
// สร้างโหนด
node = this.createnode (srcs [i], ตัวเลือก, ประกาศ, กลุ่ม);
// ตัดสินว่าพูลเธรดฟรีหรือไม่
ฟรี = this.getFree ();
ถ้า (ฟรี) {
// หากคุณมีเวลาว่างให้โหลดรูปภาพทันที
this.setSrc (free.img, โหนด);
}อื่น{
// ไม่ว่างเพิ่มงานลงในรายการที่เชื่อมโยง
this.appendNode (โหนด);
-
-
-
-
* รับข้อมูลสถานะภายใน
* @returns {{}}
-
imagePool.prototype.info = function () {
var info = {}
ความยาว = 0,
i = 0,
โหนด = null;
//ด้าย
info.thread = {};
// จำนวนเธรดทั้งหมด
info.thread.count = this.pool.length;
// จำนวนเธรดที่ไม่ได้ใช้งาน
info.thread.free = 0;
//งาน
info.task = {};
// จำนวนงานที่รอดำเนินการ
info.task.count = 0;
// รับจำนวน "เธรด" ฟรี
สำหรับ (i = 0, length = this.pool.length; i <length; i ++) {
if (this.pool [i] .free) {
info.thread.free = info.thread.free + 1;
-
-
// รับจำนวนงาน (ความยาวห่วงโซ่งาน)
node = this.linkhead;
ถ้า (โหนด) {
info.task.count = info.task.count + 1;
ในขณะที่ (node.next) {
info.task.count = info.task.count + 1;
node = node.next;
-
-
ข้อมูลส่งคืน;
-
-
* สร้างโหนด
* @Param SRC Path Path สตริง
* @Param ตัวเลือกพารามิเตอร์ที่ผู้ใช้กำหนด รวมถึง: การโทรกลับที่ประสบความสำเร็จการโทรกลับข้อผิดพลาดเมื่อแท็ก
* @param ประกาศกลยุทธ์การโทรกลับ การทำงาน.
* ข้อมูลกลุ่มกลุ่ม @param วัตถุ. {count: 0, ความสำเร็จ: [], ข้อผิดพลาด: []}
* @param tr จำนวนข้อผิดพลาดลองอีกครั้ง ค่า. ค่าเริ่มต้นคือ 0
* @returns {{}}
-
imagePool.prototype.createnode = function (src, ตัวเลือก, ประกาศ, กลุ่ม, tr) {
var node = {};
node.src = src;
node.options = ตัวเลือก;
Node.Notice = ประกาศ;
node.group = กลุ่ม;
node.try = tr || 0;
ส่งคืนโหนด;
-
-
* ผนวกโหนดไปที่ส่วนท้ายของรายการงาน
* @param โหนดโหนด วัตถุ.
-
imagePool.prototype.appendNode = function (node) {
// ตัดสินว่ารายการที่เชื่อมโยงนั้นว่างเปล่า
ถ้า (! this.linkhead) {
this.linkhead = node;
this.linkNode = Node;
}อื่น{
this.linkNode.next = node;
this.linkNode = Node;
-
-
-
* ลบส่วนหัวของลิงค์
-
imagePool.prototype.shiftNode = function () {
// แยกแยะว่ามีโหนดในรายการที่เชื่อมโยงหรือไม่
if (this.linkhead) {
// แก้ไขส่วนหัวรายการลิงค์
this.linkhead = this.linkhead.next || โมฆะ;
-
-
-
* ส่งออกอินเทอร์เฟซภายนอก
* @param สูงสุดจำนวนการเชื่อมต่อ ค่า.
* @returns {{load: function, info: function}}
-
exports.initimagePool = function (สูงสุด) {
ถ้า (! อินสแตนซ์) {
อินสแตนซ์ = ใหม่ imagePool (สูงสุด);
instance.initpool ();
-
กลับ {
-
* กำลังโหลดรูปภาพ
-
โหลด: ฟังก์ชัน () {
Instance.load.apply (อินสแตนซ์, อาร์กิวเมนต์);
-
-
* ข้อมูลภายใน
* @returns {* | any | void}
-
ข้อมูล: function () {
return instance.info.call (อินสแตนซ์);
-
-
-
}(นี้));
ข้างต้นเป็นตัวอย่างของวิธีการใช้ตัวจัดการการโหลดภาพ JavaScript ที่ยอดเยี่ยมโดยเฉพาะ คุณได้เรียนรู้วิธีการใช้งานหรือไม่?