Vorwort
ImagePool ist ein JS -Tool zum Verwalten von Bildladen. ImagePool kann die Anzahl der gleichzeitigen Bildbelastungen steuern.
Für das Laden des Bildes ist es am primitivsten, ein IMG -Tag direkt zu schreiben, wie z. B.: <img Src = "Bild url" />.
Nach kontinuierlicher Optimierung ist ein Bildverzögerungsbelastungsschema aufgetaucht. Dieses Mal ist die URL des Bildes nicht direkt im SRC-Attribut geschrieben, sondern in einem bestimmten Attribut, wie z. Auf diese Weise lädt der Browser das Bild nicht automatisch. Wenn die entsprechende Zeit benötigt wird, verwenden Sie JS, um die URL in das Daten-SRC-Attribut in das SRC-Attribut des IMG-Tags zu setzen, oder verwenden Sie nach dem Lesen der URL JS, um das Bild zu laden, das SRC-Attribut nach dem Laden festlegen und das Bild anzeigen.
Dies scheint gut kontrolliert zu sein, aber es wird immer noch Probleme geben.
Obwohl es nur einen Teil des Bildes laden kann, kann dieser Teil des Bildes immer noch eine relativ große Größenordnung sein.
Dies ist keine große Sache für die PC -Seite, aber für die mobile Seite sind zu viele gleichzeitige Bilder geladen, was sehr wahrscheinlich zu Anwendungsabstürzen führt.
Daher benötigen wir dringend einen Bildpuffermechanismus, um die Parallelitätsbelastung der Bildbelastung zu steuern. Ähnlich wie beim Backend -Datenbankverbindungspool erstellt er nicht zu viele Verbindungen und kann jede Verbindung vollständig wiederverwenden.
Zu diesem Zeitpunkt wurde ImagePool geboren.
Schlechtes schematisches Diagramm
Anweisungen zur Verwendung
Initialisieren Sie zunächst den Verbindungspool:
var imagepool = initimagepool (5);
Initimagepool ist eine globale Methode, die direkt überall verwendet werden kann. Die Funktion besteht darin, einen Verbindungspool zu erstellen, und Sie können die maximale Anzahl von Verbindungen zum Verbindungspool angeben. Optional beträgt der Standardwert 5.
Auf derselben Seite geben mehrere Anrufe bei Initimagepool die gleiche Kerninstanz zurück, was immer das erste ist, mit einem kleinen Singleton -Gefühl. Zum Beispiel:
Die Codekopie lautet wie folgt:
var magerpool1 = initimagepool (3);
var imagepool2 = initimagepool (7);
Zu diesem Zeitpunkt beträgt die maximale Anzahl von Verbindungen zwischen ImagePool1 und ImagePool2 3 und die gleiche Kerninstanz wird intern verwendet. Beachten Sie, dass der interne Kern gleich ist, nicht das imagepool1 === ImagePool2.
Nach der Initialisierung können Sie das Bild mit Vertrauen laden.
Der einfachste Weg zu rufen ist wie folgt:
Die Codekopie lautet wie folgt:
var magerpool = initimagepool (10);
ImagePool.load ("Bild -URL", {
Erfolg: Funktion (SRC) {
console.log ("Erfolg :::::"+src);
},
Fehler: Funktion (SRC) {
console.log ("Fehler :::"+src);
}
});
Rufen Sie einfach die Lastmethode auf der Instanz auf.
Die Lastmethode hat zwei Parameter. Der erste Parameter ist die Bild -URL, die geladen werden muss, und der zweite Parameter sind verschiedene Optionen, einschließlich erfolgreicher und fehlgeschlagener Rückrufe. Die Bild -URL wird während der Rückrufe übergeben.
Auf diese Weise können Sie nur in einem Bild passieren, sodass es auch in der folgenden Form geschrieben werden kann:
Die Codekopie lautet wie folgt:
var magerpool = initimagepool (10);
ImagePool.load (["Bild 1url", "Bild 2url"], {
Erfolg: Funktion (SRC) {
console.log ("Erfolg :::::"+src);
},
Fehler: Funktion (SRC) {
console.log ("Fehler :::"+src);
}
});
Wenn Sie ein Bild -URL -Array übergeben, können Sie mehrere Bilder übergeben.
Wenn jedes Bild erfolgreich geladen wird (oder fehlgeschlagen), wird die Erfolgsmethode (oder Fehler) aufgerufen und die entsprechende Bild -URL übergeben.
Aber manchmal müssen wir solche Rückrufe nicht häufig zurückrufen. In ein Bild -URL -Array übergeben. Wenn alle Bilder in diesem Array verarbeitet werden, reichen Rückrufe aus.
Fügen Sie einfach eine Option hinzu:
Die Codekopie lautet wie folgt:
var magerpool = initimagepool (10);
ImagePool.load (["Bild 1url", "Bild 2url"], {
Erfolg: Funktion (Sarray, Earray, Graf) {
console.log ("sarray :::"+sarray);
console.log ("Earray :::"+Earray);
console.log ("count :::::"+count);
},
Fehler: Funktion (SRC) {
console.log ("Fehler :::"+src);
},
Einmal: wahr
});
Wenn Sie der Option einst ein Attribut hinzufügen und auf True setzen, können Sie nur einmal einen Rückruf erzielen.
Dieses Mal muss die Erfolgsmethode zurückgerufen und die Fehlermethode zu diesem Zeitpunkt ignoriert werden.
Zu diesem Zeitpunkt wird die Rückruferfolgsmethode nicht mehr in einen Bild -URL -Parameter übergeben, sondern in drei Parametern, nämlich ein erfolgreiches URL -Array, fehlgeschlagenes URL -Array und die Gesamtzahl der verarbeiteten Bilder.
Darüber hinaus gibt es eine Möglichkeit, den internen Zustand des Verbindungspools zu erhalten:
Die Codekopie lautet wie folgt:
var magerpool = initimagepool (10);
console.log (imagepool.info ());
Durch Aufrufen der Info -Methode können Sie zum aktuellen Zeitpunkt den internen Status des Verbindungspools erhalten, und die Datenstruktur lautet wie folgt:
Object.Task.Count Anzahl der Aufgaben, die auf die Verarbeitung im Verbindungspool warten
Object.Thread.Count die maximale Anzahl von Verbindungen zum Verbindungspool
Object.Thread.Free Anzahl freier Verbindungen zum Verbindungspool
Es wird empfohlen, diese Methode nicht häufig aufzurufen.
Schließlich sollte beachtet werden, dass es höchstens dreimal versucht, wenn das Bild nicht geladen wird. Wenn das Bild am Ende nicht geladen wird, wird die Fehlermethode zurückgerufen. Die Anzahl der Versuche kann im Quellcode geändert werden.
Lassen Sie mich schließlich betonen, dass die Leser Bilder so weit wie möglich in den Verbindungspool schieben können, ohne sich über eine übermäßige Parallelität zu sorgen. ImagePool hilft Ihnen beim Laden dieser Bilder in einem Chaos.
Schließlich muss beachtet werden, dass ImagePool die Bildladungsgeschwindigkeit theoretisch nicht reduziert, sondern nur eine glatte Beladung ist.
Quellcode
Die Codekopie lautet wie folgt:
(Funktion (exportiert) {
//Einzel
var instance = null;
var leerefn = function () {};
// Erste Standardkonfiguration
var config_default = {
// die Anzahl der "Threads" im Thread -Pool
Thread: 5,
// Die Anzahl der Wiederholung konnte das Bild nicht laden
// Versuchen Sie es zweimal, fügen Sie das Original hinzu, insgesamt dreimal
"Versuchen Sie": 2
};
//Werkzeug
var _helpers = {
// DOM -Attribut festlegen
setAttr: (function () {
var img = new Image ();
// Beurteilen Sie, ob der Browser den HTML5 -Datensatz unterstützt
if (img.dataset) {
Rückgabefunktion (DOM, Name, Wert) {
Dom.Dataset [Name] = Wert;
Rückgabewert;
};
}anders{
Rückgabefunktion (DOM, Name, Wert) {
Dom.SetAttribute ("Daten-"+Name, Wert);
Rückgabewert;
};
}
} ()),
// DOM -Attribut abrufen
getattr: (function () {
var img = new Image ();
// Beurteilen Sie, ob der Browser den HTML5 -Datensatz unterstützt
if (img.dataset) {
Rückgabefunktion (DOM, Name) {
return dom.dataset [name];
};
}anders{
Rückgabefunktion (DOM, Name) {
return dom.getAttribute ("data-"+name);
};
}
} ())
};
/**
* Konstruktionsmethode
* @param max Maximale Anzahl von Verbindungen. Wert.
*/
Funktion bildpool (max) {
// maximale Anzahl der Parallelität
this.max = max || config_default.thread;
this.linkhead = null;
this.linknode = null;
// Pool laden
// [{img: dom, kostenlos: true, node: node}]
//Knoten
// {src: "", Optionen: {Erfolg: "Fn", Fehler: "Fn", einmal: true}, Versuche: 0}
this.pool = [];
}
/**
* Initialisierung
*/
ImagePool.Prototype.initpool = function () {
var i, img, obj, _s;
_s = this;
für (i = 0; i <this.max; i ++) {
obj = {};
img = new Image ();
_helpers.setAttr (IMG, "id", i);
img.onload = function () {
var id, src;
// Rückruf
//_s.getnode(this).options.success.call(null, this.src);
_s.notice (_s.getNode (this), "Erfolg", this.src);
// Aufgaben verarbeiten
_s.executelink (this);
};
img.onError = function (e) {
var node = _s.getnode (this);
// beurteilen Sie die Anzahl der Versuche
if (node.try <config_default.try) {
node.try = node.try + 1;
// Fügen Sie wieder zum Ende der Aufgabenliste hinzu
_s.appendNode (_s.createNode (node.src, node.options, node.notice, node.group, node.try));
}anders{
// Fehlerrückruf
//node.options.error.call(null, this.src);
_s.notice (Knoten, "Fehler", this.src);
}
// Aufgaben verarbeiten
_s.executelink (this);
};
obj.img = img;
obj.free = true;
this.pool.push (obj);
}
};
/**
* Rückrufverkapselung
* @param -Knotenknoten. Objekt.
* @param Status Status. Saite. Optionaler Wert: Erfolg | Fehler (fehlgeschlagen)
* @param src Bildpfad. Saite.
*/
ImagePool.Prototype.notice = Funktion (Knoten, Status, Src) {
node.notice (Status, SRC);
};
/**
* Aufgaben der verknüpften Listen verarbeiten
* @param DOM Image DOM -Objekt. Objekt.
*/
ImagePool.Prototype.execUTelink = Funktion (DOM) {
// Erkennen Sie, ob in der verknüpften Liste Knoten enthalten sind
if (this.linkhead) {
// das nächste Bild laden
this.setsrc (Dom, this.linkhead);
// Entfernen Sie den Link -Header
this.shiftnode ();
}anders{
// Setzen Sie Ihren eigenen Status auf Leerlauf
this.status (dom, true);
}
};
/**
* Rächen Sie Leerlauf "Thread"
*/
ImagePool.Prototype.getFree = function () {
var Länge, ich;
für (i = 0, länge = this.pool.length; i <länge; i ++) {
if (this.pool [i] .free) {
kehre diesen.pool [i];
}
}
null zurückkehren;
};
/**
* Einstellungen für die SRC -Attributeinstellungen einkapseln
* Da das Ändern des SRC -Attributs dem Laden des Bildes entspricht, verkapseln Sie den Vorgang
* @param DOM Image DOM -Objekt. Objekt.
* @param -Knotenknoten. Objekt.
*/
ImagePool.Prototype.Setsrc = Funktion (DOM, Knoten) {
// Setzen Sie den "Thread" in den Pool, um nicht zu geniden zu sein
this.status (dom, false);
// verbundener Knoten
this.setNode (DOM, Knoten);
// das Bild laden
Dom.src = node.src;
};
/**
* Aktualisieren Sie den Status "Thread" im Pool
* @param DOM Image DOM -Objekt. Objekt.
* @param Status Status. Boolean. Optionaler Wert: TRUE (Idle) | Falsch (nicht genehmigt)
*/
ImagePool.Prototype.status = Funktion (DOM, Status) {
var id = _helpers.getAttr (DOM, "id");
this.pool [id] .free = Status;
// Leerlaufzustand, löschen Sie den zugehörigen Knoten
if (Status) {
this.pool [id] .node = null;
}
};
/**
* Aktualisieren Sie den zugehörigen Knoten von "Thread" im Pool
* @param DOM Image DOM -Objekt. Objekt.
* @param -Knotenknoten. Objekt.
*/
ImagePool.Prototype.setNode = Funktion (DOM, Knoten) {
var id = _helpers.getAttr (DOM, "id");
this.pool [id] .node = node;
return this.pool [id] .node === Knoten;
};
/**
* Holen Sie sich den zugehörigen Knoten des "Threads" in den Pool
* @param DOM Image DOM -Objekt. Objekt.
*/
ImagePool.Prototype.getNode = Funktion (DOM) {
var id = _helpers.getAttr (DOM, "id");
return this.pool [id] .node;
};
/**
* Externe Schnittstelle, Bilder laden
* @param src kann eine SRC -Zeichenfolge oder ein Array von SRC -Zeichenfolgen sein.
* @Param-Optionen Benutzerdefinierte Parameter. Beinhaltet: Erfolgsruf, Fehlerrückruf, einmal Tag.
*/
ImagePool.Prototype.load = Funktion (SRC, Optionen) {
var srcs = [],
kostenlos = null,
Länge = 0,
i = 0,
// Initialisieren Sie nur einmal die Rückrufstrategie
Hinweis = (function () {
if (options.once) {
Rückgabefunktion (Status, Src) {
var g = this.group,
o = this.options;
//Aufzeichnen
G [Status] .push (SRC);
// erkennen, ob alle Reorganisationen verarbeitet wurden
if (g.success.length + g.Error.length === G.Count) {
//asynchron
// In der Tat wird es separat ausgeführt, um zu verhindern
setTimeout (function () {
O.Success.call (Null, G.Success, G.Error, G. Count);
}, 1);
}
};
}anders{
Rückgabefunktion (Status, Src) {
var o = this.options;
// direkter Rückruf
setTimeout (function () {
o [Status] .Call (NULL, SRC);
}, 1);
};
}
} ()),
Gruppe = {
Zählen: 0,
Erfolg: [],
Fehler: []
},
node = null;
Optionen = Optionen || {};
options.success = options.success || leer;
Optionen.Error = options.Error || leer;
srcs = srcs.concat (SRC);
// Legen Sie die Anzahl der Gruppenelemente fest
Gruppe.Count = srcs.length;
// Reisen Sie über die Bilder, die geladen werden müssen
für (i = 0, Länge = srcs.length; i <Länge; i ++) {
// Erstellen Sie einen Knoten
node = this.createNode (SRCS [i], Optionen, Bekanntmachung, Gruppe);
// Beurteilen Sie, ob der Thread -Pool kostenlos ist
Free = this.getFree ();
if (frei) {
// Wenn Sie Freizeit haben, laden Sie das Bild sofort
this.setsrc (Free.img, Knoten);
}anders{
// Kein Leerlauf, fügen Sie die Aufgabe der verknüpften Liste hinzu
this.appendNode (Knoten);
}
}
};
/**
* Informationsinformationen für interne Status erhalten
* @returns {{}}
*/
ImagePool.Prototype.info = function () {
var info = {},
Länge = 0,
i = 0,
node = null;
//Faden
info.thread = {};
// Gesamtzahl der Threads
info.thread.count = this.pool.length;
// Anzahl der Leerlauffäden
info.thread.free = 0;
//Aufgabe
info.task = {};
// Anzahl der anstehenden Aufgaben
info.task.count = 0;
// Erhalten Sie die Anzahl der kostenlosen "Threads"
für (i = 0, länge = this.pool.length; i <länge; i ++) {
if (this.pool [i] .free) {
info.thread.free = info.thread.free + 1;
}
}
// Erhalten Sie die Anzahl der Aufgaben (Aufgabenkettenlänge)
node = this.linkhead;
if (Knoten) {
info.task.count = info.task.count + 1;
while (node.next) {
info.task.count = info.task.count + 1;
node = node.next;
}
}
Info zurückgeben;
};
/**
* Erstellen Sie einen Knoten
* @param src Bildpfad. Saite.
* @Param-Optionen Benutzerdefinierte Parameter. Beinhaltet: Erfolgsruf, Fehlerrückruf, einmal Tag.
* @Param Notice Callback -Strategie. Funktion.
* @param Gruppengruppeninformationen. Objekt. {count: 0, Erfolg: [], Fehler: []}
* @Param TR Anzahl der Wiederholungsfehler. Wert. Der Standard ist 0.
* @returns {{}}
*/
ImagePool.Prototype.CreateNode = Funktion (SRC, Optionen, Hinweis, Gruppe, Tr) {
var node = {};
node.src = src;
node.options = Optionen;
node.notice = phinet;
node.group = Gruppe;
node.try = tr || 0;
Return Node;
};
/**
* Hängen Sie Knoten am Ende der Aufgabenliste an
* @param -Knotenknoten. Objekt.
*/
ImagePool.Prototype.AppendNode = Funktion (Knoten) {
// Beurteile, ob die verlinkte Liste leer ist
if (! this.linkhead) {
this.linkhead = node;
this.linknode = node;
}anders{
this.linknode.next = node;
this.linknode = node;
}
};
/**
* Löschen Sie den Header des Links
*/
ImagePool.Prototype.shiftnode = function () {
// Erkennen Sie, ob in der verknüpften Liste Knoten enthalten sind
if (this.linkhead) {
// den Linklistenheader ändern
this.linkhead = this.linkhead.Next || Null;
}
};
/**
* Externe externe Schnittstelle exportieren
* @param max Maximale Anzahl von Verbindungen. Wert.
* @returns {{lade: function, info: function}}
*/
exports.initimagepool = function (max) {
if (! Instanz) {
Instance = new ImagePool (max);
Instance.initpool ();
}
zurückkehren {
/**
* Bilder laden
*/
Laden: function () {
Instance.load.Apply (Instanz, Argumente);
},
/**
* Interne Informationen
* @returns {* | any | void}
*/
info: function () {
return Instance.info.call (Instanz);
}
};
};
}(Das));
Das obige ist ein Beispiel dafür, wie dieses besonders großartige JavaScript-Front-End-Image-Lademanager verwendet wird. Haben Sie gelernt, wie man es benutzt?