Was sind die Wissenspunkte zu img.onload?
Vorwort:
Bei der Verwendung von Onload sehen wir immer verschiedene Vorschläge und unterschiedliche Leistungen auf verschiedenen Browsern. Diese von anderen zusammengefassten Erfahrungen werden nicht über Nacht erzielt, und sie werden ständig durch ständiges Ausprobieren und Testen erreicht , und die Optimierung kann nur aus der Grube herausklettern. Erst wenn Sie auf etwas stoßen, das Sie nicht verstehen, versuchen Sie es herauszufinden und tippen Sie es ein paar Mal ein, dann gehört Ihnen das Wissen. Meine bescheidene Meinung~_~, kein Unsinn mehr...
Schauen Sie sich zuerst einen Code an:
<body>
<p class="box">
<p> 1111</p>
</p>
<script type="text/javascript"> function loadImage(url, callback) {
//创建一个Image对象，实现图片的预下载
var img = new Image();
img.src = url;
console.log('----111----'); // 如果图片已经存在于浏览器缓存，直接调用回调函数
if (img.complete) {
callback(img); // 直接返回，不用再处理onload事件
return ;
}
img.onload = function() {
console.log('----333----'); //图片下载完毕时异步调用callback函数
callback(img);
}
console.log('----222----');
} function call(img) {
// 有权访问另一个函数作用域内变量的函数都是闭包
$(img).appendTo('.box');
}
loadImage('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1504976397726&di=62045a300551dd62608d3e9423221c1f&imgtype=0&src=http%3A%2F%2Fp9.qhmsg.com%2Ft01ffd2fe0a1210db89.png',call);
//loadImage('./img/bird.png', call);
</script>
[闭包概念讲解](http://www.cnblogs.com/wangfupeng1988/p/3994065.html)分析以上代码：
这个方法功能是ok的，但是有一些隐患。1 创建了一个临时匿名函数来作为图片的onload事件处理函数，形成了闭包。
相信大家都看到过ie下的内存泄漏模式的文章，其中有一个模式就是循环引用，而闭包就有保存外部运行环境的能力（依赖于作用域链的实现），所以 img.onload这个函数内部又保存了对img的引用，这样就形成了循环引用，导致内存泄漏。（这种模式的内存泄漏只存在低版本的ie6中，打过补丁 的ie6以及高版本的ie都解决了循环引用导致的内存泄漏问题）。
**这里有点类似于Object-c中block和self的Strong Reference cycle，即循环强引用，self引用了block，block中又用到了self，各自的引用计数器都为一，都强引用对方，不会销毁，造成内存泄漏。OC中就是把self变为weakSelf来解决，同理我们也要在这里有所作为。**2 只考虑了静态图片的加载，忽略了gif等动态图片，这些动态图片可能会多次触发onload。
要解决上面两个问题很简单，在img.onload中把img.onload=null;
代码如下：
img.onload = function () {
//图片下载完毕时异步调用callback函数。
img.onload = null;
callback(img);
};
这样既能解决内存泄漏的问题，又能避免动态图片的事件多次触发问题。
在一些相关博文中，也有人注意到了要把img.onload 设置为null，只不过时机不对，大部分文章都是在callback运行以后，才将img.onload设置为null，这样虽然能解决循环引用的问题， 但是对于动态图片来说，如果callback运行比较耗时的话，还是有多次触发的隐患的。
隐患经过上面的修改后，就消除了，但是这个代码还有优化的余地：if (img.complete) {
// 如果图片已经存在于浏览器缓存，直接调用回调函数
callback(img);
return; // 直接返回，不用再处理onload事件 }
经过对多个浏览器版本的测试，发现ie、opera下，当图片加载过一次以后，如果再有对该图片的请求时，由于浏览器已经缓存住这张图片了，不会再发起一次新的请求，而是直接从缓存中加载过来。
对于 firefox和safari，它们试图使这两种加载方式对用户透明，同样
会引起图片的onload事件（而ie和opera则忽略了这种同一性，不会引起图片的onload事件），因此上边的代码在它们里边不能得以实现效果。
确实，在ie，opera下，对于缓存图片的初始状态，与firefox和safari，chrome下是不一样的（有兴趣的话，可以在不同浏览器下，测试 一下在给img的src赋值缓存图片的url之前，img的complete状态），但是对onload事件的触发，却是一致的，不管是什么浏览器。产生这个问题的根本原 因在于，img的src赋值与 onload事件的绑定，顺序不对（在ie和opera下，先赋值src，再赋值onload，因为是缓存图片，就错过了onload事件的触发）。应该 先绑定onload事件，然后再给src赋值，代码如下：function loadImage(url, callback) {
var img = new Image(); //创建一个Image对象，实现图片的预下载
img.onload = function(){
img.onload = null;
callback(img);
}
img.src = url;
}
这样内存泄漏，动态图片的加载问题都得到了解决，而且也以统一的方式，实现了callback的调用。Das obige ist der detaillierte Inhalt vonWas sind die Wissenspunkte zu img.onload?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Sammlung von Python-Spickzetteln. Welche Wissenspunkte beherrschen Sie?
Apr 26, 2023 pm 10:49 PM
Python ist derzeit die beliebteste Programmiersprache. Ich glaube, dass jeden Tag eine große Anzahl von Anfängern hinzukommen wird. Doch egal wie einfach eine Sprache zu erlernen ist, es gibt immer noch viele grundlegende Konzepte und Grundkenntnisse. Für einen Anfänger ist es immer noch schwierig, so viel auf einmal zu beherrschen. Heute haben wir viele Wissens-Spickzettel zum Thema Python zusammengestellt, von denen man sagen kann, dass sie umfassend sind. In Zukunft muss sich Mama keine Sorgen mehr machen, dass sich nicht alle Wissenspunkte merken können! Python-Grundlagen Python-Grundlagen Dieser Spickzettel enthält alle Grundkenntnisse von Python, von variablen Datentypen bis zu Listenzeichenfolgen, von der Umgebungsinstallation bis zur Verwendung häufig verwendeter Bibliotheken. Man kann sagen, dass er umfassend ist. Anfänger-Pytho
Welche Spiele eignen sich zum Spielen mit i34150 und 1G-unabhängiger Grafik (welche Spiele sind für i34150 geeignet)
Jan 05, 2024 pm 08:24 PM
Welche Spiele können mit dem i34150 mit 1G-unabhängiger Grafik gespielt werden? Kann er kleine Spiele wie LoL spielen? GTX750 und GTX750TI sind sehr geeignete Grafikkarten. Wenn Sie nur ein paar kleine Spiele spielen oder keine Spiele spielen, empfiehlt sich die Verwendung der integrierten i34150-Grafikkarte. Im Allgemeinen ist der Preisunterschied zwischen Grafikkarten und Prozessoren nicht sehr groß, daher ist es wichtig, eine vernünftige Kombination zu wählen. Wenn Sie 2 GB Videospeicher benötigen, wird empfohlen, GTX750TI zu wählen. Wenn Sie nur 1 GB Videospeicher benötigen, wählen Sie einfach GTX750. Die GTX750TI kann als verbesserte Version der GTX750 mit Übertaktungsfunktionen angesehen werden. Welche Grafikkarte mit dem i34150 gekoppelt werden kann, hängt von Ihren Anforderungen ab. Wenn Sie eigenständige Spiele spielen möchten, empfiehlt es sich, einen Wechsel der Grafikkarte in Betracht zu ziehen. du kannst wählen
Enthüllung des Geheimnisses des HTML-Caching-Mechanismus: wesentliche Wissenspunkte
Jan 23, 2024 am 08:51 AM
Das Geheimnis des HTML-Caching-Mechanismus: Wesentliche Wissenspunkte, spezifische Codebeispiele sind erforderlich. Bei der Webentwicklung war die Leistung schon immer ein wichtiger Gesichtspunkt. Der HTML-Caching-Mechanismus ist einer der Schlüssel zur Verbesserung der Leistung von Webseiten. In diesem Artikel werden die Prinzipien und praktischen Fähigkeiten des HTML-Caching-Mechanismus erläutert und spezifische Codebeispiele bereitgestellt. 1. Prinzip des HTML-Caching-Mechanismus Während des Zugriffs auf eine Webseite fordert der Browser den Server auf, die HTML-Seite über das HTTP-Protokoll abzurufen. Der HTML-Caching-Mechanismus besteht darin, HTML-Seiten im Browser zwischenzuspeichern
Welche Art von Computerausrüstung wird für Angewandte Physik benötigt (welche Kurse sind für Angewandte Physik erforderlich)
Dec 30, 2023 pm 12:11 PM
Welcher Computer für die angewandte Physik verwendet werden soll, erfordert eine hohe Leistung. 2. Der Grund dafür ist, dass das Hauptfach Physik eine große Anzahl an Datenverarbeitungs-, Simulationsrechnungen und Programmieraufgaben umfasst und zur Unterstützung dieser Aufgaben einen Computer mit höherer Konfiguration erfordert. Eine höhere Prozessorleistung und Speicherkapazität können die Rechengeschwindigkeit und Betriebseffizienz verbessern, ein größerer Speicherplatz kann große Datenmengen und Simulationsergebnisse speichern und eine bessere Grafikkartenleistung kann physikalische Simulations- und Visualisierungsaufgaben unterstützen. 3. Darüber hinaus müssen Studierende im Hauptfach Physik möglicherweise auch bestimmte Softwaretools verwenden, z. B. numerische Berechnungssoftware, Simulationssoftware und Datenanalysesoftware usw. Diese Software stellt auch bestimmte Anforderungen an die Computerkonfiguration. Um Studien- und Forschungsarbeiten besser zu unterstützen, müssen sich Physikstudenten daher in der Regel für einen Computer mit höherer Ausstattung entscheiden
Ausführliche Erklärung der MySQL-Datentypen: Was Sie wissen müssen
Jun 15, 2023 am 08:56 AM
MySQL ist eines der beliebtesten relationalen Datenbankverwaltungssysteme weltweit und wird aufgrund seiner Zuverlässigkeit, hohen Sicherheit, hohen Skalierbarkeit und relativ geringen Kosten häufig verwendet. MySQL-Datentypen definieren die Speichermethoden verschiedener Datentypen und sind ein wichtiger Bestandteil von MySQL. In diesem Artikel werden die Datentypen von MySQL und einige Wissenspunkte, auf die in praktischen Anwendungen geachtet werden muss, ausführlich erläutert. 1. MySQL-Datentypklassifizierung MySQL-Datentypen können in die folgenden Kategorien unterteilt werden: Ganzzahltypen: einschließlich TINYINT,
Einführung in die Netzwerksicherheit: Was sind die wesentlichen Wissenspunkte für Einsteiger?
Jun 11, 2023 am 09:57 AM
Einführung in die Netzwerksicherheit: Was sind die wesentlichen Wissenspunkte für Einsteiger? In den letzten Jahren hat die Netzwerksicherheit mit der rasanten Entwicklung des Internets immer mehr Aufmerksamkeit auf sich gezogen. Für viele Menschen ist die Netzwerksicherheit jedoch immer noch ein unbekannter Ozean. Welche grundlegenden Kenntnisse müssen Anfänger also beherrschen, um mit der Netzwerksicherheit zu beginnen? Dieser Artikel wird es für Sie klären. 1. Netzwerkangriffe und -bedrohungen Zunächst einmal ist das Verständnis der Arten von Netzwerkangriffen und -bedrohungen ein Wissenspunkt, den man beherrschen muss, um mit der Netzwerksicherheit beginnen zu können. Es gibt viele Arten von Cyberangriffen wie Phishing-Angriffe, Malware und Ransomware
Aufgedeckte Oracle-Datentypen: Wissenspunkte, die Sie kennen müssen
Mar 07, 2024 pm 05:18 PM
Das Geheimnis der Oracle-Datentypen: Wissenspunkte, die Sie verstehen müssen, und spezifische Codebeispiele. Als eines der weltweit führenden Datenbankverwaltungssysteme spielt Oracle eine wichtige Rolle bei der Datenspeicherung und -verarbeitung. In Oracle ist der Datentyp ein sehr wichtiges Konzept, das das Speicherformat, den Bereich und die Betriebsmethode der Daten in der Datenbank definiert. In diesem Artikel werden verschiedene Wissenspunkte zu Oracle-Datentypen aufgezeigt und deren Verwendung und Eigenschaften anhand spezifischer Codebeispiele demonstriert. 1. Allgemeine Datentypen, Zeichendatentypen
Wichtige Wissenspunkte: Grundlegende Fähigkeiten zur Beherrschung des responsiven CSS-Layouts
Feb 24, 2024 pm 10:09 PM
Wichtige Wissenspunkte: Um die wesentlichen Fähigkeiten des responsiven CSS-Layouts zu beherrschen, sind spezifische Codebeispiele erforderlich. Im modernen Internetzeitalter verwenden immer mehr Menschen mobile Geräte zum Durchsuchen von Webseiten, daher ist das responsive Layout von Webseiten besonders wichtig geworden. Responsives Layout bedeutet, dass eine Webseite ihr Layout und ihren Stil automatisch an unterschiedliche Bildschirmgrößen und Gerätetypen anpassen kann, um sich an unterschiedliche Benutzererfahrungen anzupassen. Die Beherrschung der Fähigkeiten des CSS-Responsive-Layouts ist für Front-End-Entwickler ein Muss. In diesem Artikel werden einige wichtige Wissenspunkte und Techniken vorgestellt und spezifische Codebeispiele bereitgestellt. Medien nutzen
