Quels sont les points de connaissance sur img.onload ?
Avant-propos :
Lors de l'utilisation de onload, nous voyons toujours diverses suggestions et performances différentes sur différents navigateurs. Ces expériences résumées par d'autres ne se réalisent pas du jour au lendemain, et elles sont toutes constamment martelées. Code, essais et erreurs constants, tests. , et l'optimisation ne peut que sortir du gouffre. Ce n'est que lorsque vous rencontrez quelque chose que vous ne comprenez pas, essayez de le comprendre et de le taper plusieurs fois, la connaissance vous appartiendra. Mon humble avis~_~, fini les bêtises...
Regardez d'abord un code :
<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的调用。Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Collection d'aide-mémoire Python, quels points de connaissances maîtrisez-vous ?
Apr 26, 2023 pm 10:49 PM
Python est actuellement le langage de programmation le plus populaire. Je pense qu'un grand nombre d'amis novices rejoindront les rangs de l'apprentissage chaque jour. Cependant, même si une langue est facile à apprendre, il existe encore de nombreux concepts et connaissances de base. Pour un novice, il est toujours difficile de maîtriser autant de choses à la fois. Aujourd'hui, j'ai rassemblé de nombreuses aide-mémoire sur les connaissances liées à Python, qui peuvent être considérées comme exhaustives. À l'avenir, maman n'aura plus à s'inquiéter du fait que tout le monde ne puisse se souvenir d'aucun point de connaissance ! Notions de base de Python Notions de base de Python Cette aide-mémoire contient toutes les connaissances de base de Python, des types de données variables aux chaînes de liste, de l'installation de l'environnement à l'utilisation des bibliothèques couramment utilisées, elle peut être considérée comme complète. Python pour débutants
Quels jeux conviennent pour jouer avec des graphiques indépendants i34150 et 1G (quels jeux conviennent pour i34150)
Jan 05, 2024 pm 08:24 PM
À quels jeux peut-on jouer avec le i34150 avec des graphiques indépendants 1G ? Peut-il jouer à de petits jeux tels que LoL ? GTX750 et GTX750TI sont des choix de cartes graphiques très adaptés. Si vous jouez simplement à quelques petits jeux ou ne jouez pas à des jeux, il est recommandé d'utiliser la carte graphique intégrée i34150. D’une manière générale, la différence de prix entre les cartes graphiques et les processeurs n’est pas très grande, il est donc important de choisir une combinaison raisonnable. Si vous avez besoin de 2 Go de mémoire vidéo, il est recommandé de choisir GTX750TI ; si vous n'avez besoin que de 1 Go de mémoire vidéo, choisissez simplement GTX750. La GTX750TI peut être considérée comme une version améliorée de la GTX750, avec des capacités d'overclocking. La carte graphique pouvant être associée au i34150 dépend de vos besoins. Si vous envisagez de jouer à des jeux autonomes, il est recommandé d'envisager de changer de carte graphique. tu peux choisir
Révéler les secrets du mécanisme de mise en cache HTML : points de connaissances essentiels
Jan 23, 2024 am 08:51 AM
Le secret du mécanisme de mise en cache HTML : points de connaissances essentiels, des exemples de code spécifiques sont requis Dans le développement Web, les performances ont toujours été une considération importante. Le mécanisme de mise en cache HTML est l'une des clés pour améliorer les performances des pages Web. Cet article révélera les principes et les compétences pratiques du mécanisme de mise en cache HTML et fournira des exemples de code spécifiques. 1. Principe du mécanisme de mise en cache HTML Lors du processus d'accès à une page Web, le navigateur demande au serveur d'obtenir la page HTML via le protocole HTTP. Le mécanisme de mise en cache HTML consiste à mettre en cache les pages HTML dans le navigateur
Quel type d'équipement informatique est nécessaire pour la physique appliquée (quels sont les cours requis pour la physique appliquée)
Dec 30, 2023 pm 12:11 PM
Quel ordinateur utiliser pour la physique appliquée nécessite des performances élevées. 2. La raison en est que la majeure en physique implique un grand nombre de tâches de traitement de données, de calculs de simulation et de programmation, et nécessite un ordinateur avec une configuration plus élevée pour prendre en charge ces tâches. Des performances de processeur et une capacité de mémoire plus élevées peuvent améliorer la vitesse de calcul et l'efficacité opérationnelle, un espace de stockage plus grand peut stocker de grandes quantités de données et de résultats de simulation, et de meilleures performances de la carte graphique peuvent prendre en charge les tâches de simulation physique et de visualisation. 3. De plus, les étudiants qui se spécialisent en physique peuvent également avoir besoin d'utiliser certains outils logiciels spécifiques, tels que des logiciels de calcul numérique, des logiciels de simulation et des logiciels d'analyse de données, etc. Ces logiciels ont également certaines exigences en matière de configuration informatique. Par conséquent, afin de mieux soutenir les travaux d'études et de recherche, les étudiants en physique doivent généralement choisir un ordinateur avec une configuration plus élevée.
Explication détaillée des types de données MySQL : ce que vous devez savoir
Jun 15, 2023 am 08:56 AM
MySQL est l'un des systèmes de gestion de bases de données relationnelles les plus populaires au monde et est largement utilisé en raison de sa fiabilité, de sa haute sécurité, de sa grande évolutivité et de son coût relativement faible. Les types de données MySQL définissent les méthodes de stockage de différents types de données et constituent une partie importante de MySQL. Cet article expliquera en détail les types de données de MySQL et certains points de connaissances auxquels il faut prêter attention dans les applications pratiques. 1. Classification des types de données MySQL Les types de données MySQL peuvent être divisés dans les catégories suivantes : Types entiers : y compris TINYINT,
Introduction à la sécurité des réseaux : Quels sont les points de connaissances essentiels pour les débutants ?
Jun 11, 2023 am 09:57 AM
Introduction à la sécurité des réseaux : Quels sont les points de connaissances essentiels pour les débutants ? Ces dernières années, avec le développement rapide d’Internet, la sécurité des réseaux a attiré de plus en plus d’attention. Cependant, pour de nombreuses personnes, la sécurité des réseaux reste encore un océan inconnu. Alors, pour se lancer dans la sécurité des réseaux, quelles connaissances essentielles les débutants doivent-ils maîtriser ? Cet article va régler le problème pour vous. 1. Attaques et menaces réseau Tout d'abord, comprendre les types d'attaques et de menaces réseau est un point de connaissance qui doit être maîtrisé pour se lancer dans la sécurité réseau. Il existe de nombreux types de cyberattaques telles que les attaques de phishing, les logiciels malveillants, les ransomwares.
Types de données Oracle révélés : points de connaissances que vous devez connaître
Mar 07, 2024 pm 05:18 PM
Le secret des types de données Oracle : points de connaissances que vous devez comprendre et exemples de code spécifiques. En tant que l'un des principaux systèmes de gestion de bases de données au monde, Oracle joue un rôle important dans le stockage et le traitement des données. Dans Oracle, le type de données est un concept très important qui définit le format de stockage, la plage et la méthode de fonctionnement des données dans la base de données. Cet article révélera divers points de connaissance des types de données Oracle et démontrera leur utilisation et leurs caractéristiques à travers des exemples de code spécifiques. 1. Types de données courants types de données de caractères
Points de connaissances importants : compétences essentielles pour maîtriser la mise en page réactive CSS
Feb 24, 2024 pm 10:09 PM
Points de connaissances importants : pour maîtriser les compétences essentielles de la mise en page réactive CSS, des exemples de code spécifiques sont nécessaires. À l'ère d'Internet moderne, de plus en plus de personnes utilisent des appareils mobiles pour parcourir les pages Web, la mise en page réactive des pages Web est donc devenue particulièrement importante. La mise en page réactive signifie qu'une page Web peut ajuster automatiquement sa mise en page et son style en fonction de différentes tailles d'écran et types d'appareils pour s'adapter aux différentes expériences utilisateur. Maîtriser les compétences de mise en page réactive CSS est indispensable pour les développeurs front-end. Cet article présentera quelques points de connaissances et techniques importants et fournira des exemples de code spécifiques. utiliser les médias
