Ich habe eine lange Galerie von Bildern, die ich gerne auf mobilen Geräten anzeigen würde, ohne dass ein Browser abstürzt oder ruckelt. Es gibt viele Plugins zum Lazy-Load-Laden, aber gibt es da draußen etwas, um die Bilder zu entladen, wenn sie nicht im Speicher sind?
Dies ist ein Zitat aus dem Blog des LinkedIn Engineering-Teams LinkedIn für iPad: 5 Techniken für glattes unendliches Scrollen in HTML5 , das für diese Frage relevant ist:
UIWebView / Mobile Safari hat strenge Grenzwerte für Bilder . Unser Stream ist voller großer Bilder, so dass wir sehr schnell an die Grenzen stoßen. Eine Möglichkeit bestand darin, das HTML5-Canvas-Element zum Zeichnen von Bildern zu verwenden, ohne Speicherprobleme zu verursachen . Wir fanden jedoch, dass das Zeichnen sehr großer Bilder auf der Leinwand langsam war. Daher mussten wir einen anderen Ansatz wählen: Wenn ein Bild ausreichend weit vom Bildschirm entfernt wurde, haben wir das Attribut "src" des img-Tags durch ein sehr kleines Bild ersetzt. Dies stellte sicher, dass der Speicher, der zum Rendern großer Bilder verwendet wurde, periodisch freigegeben wurde. Außerdem haben wir sichergestellt, dass wir das leer nicht eingeführt haben Image src Attribut Fehler .
Ich glaube nicht, dass es irgendeinen Weg dafür gibt. JavaScript enthält nur Verweise auf DOM-Objekte, die wiederum vom Browser verwaltet werden. Es liegt also ausschließlich an der Browser-Cache-Engine, festzustellen, wann eine Ressource freigegeben wird. Und diese Entscheidungen basieren nicht darauf, ob eine JavaScript-Referenz auf dieses Objekt existiert oder nicht, sondern ob die Seite, für die die Ressource geladen wurde, noch aktiv ist. In jedem Fall führt der Browser die Cache-Verwaltung automatisch durch und Sie können sie nicht über JavaScript beeinflussen, da dies eine Art Interaktion mit dem Dateisystem des Benutzers bedeuten würde, die in JavaScript aus Sicherheitsgründen nur in sehr seltenen Fällen mit ausdrücklicher Genehmigung erlaubt ist .
Dies ist ein älterer Artikel, aber immer noch hilfreich: Ссылка
Damit Event-Handler benachrichtigt werden können, dass ein Bildelement das Viewport betritt und verlässt, um sein src -Attribut durch die tatsächliche URL (im Viewport) oder die Platzhalter-URL (außerhalb des Viewports) zu ersetzen, gibt es folgende Plugins:
Das Ersetzen des Attributs src garantiert immer noch nicht, dass der Browser Speicher freigibt, aber es ist ein starker Hinweis für den Garbage Collector. Und wenn das Bild nicht sofort freigegeben wird, befindet es sich immer noch im Cache, wenn der Benutzer sich dazu entschließen sollte, zurückzuscrollen.
Tags und Links javascript jquery jquery-plugins