img.onload に関する知識ポイントは何ですか?
前書き:
onload を使用すると、さまざまなブラウザーでさまざまな提案やさまざまなパフォーマンスが常に表示されます。これらのエクスペリエンスは、常にコードを入力し、継続的に試行錯誤、テスト、最適化することでのみ達成できます。穴から登る。理解できないことに遭遇し、それを理解しようとして、何度か入力して初めて、その知識はあなたのものになります。私の謙虚な意見~_~、これ以上ナンセンスはやめてください...
最初にコードを見てください:
<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的调用。以上がimg.onload に関する知識ポイントは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7471
15
1377
52
77
11
19
30
Python チートシート集、どのような知識ポイントをマスターしましたか?
Apr 26, 2023 pm 10:49 PM
Python は現在最も人気のあるプログラミング言語であり、これから多くの初心者の友人が日々学習の仲間入りをすると思います。しかし、いくら学びやすい言語とはいえ、基本的な概念や基礎知識は数多くあり、初心者にとって一度に多くのことをマスターするのはやはり難しいものです。今日は、網羅的とも言える Python 関連の知識チートシートをたくさん集めました。将来、お母さんは、みんなが知識を覚えられなくて心配する必要がなくなります。 Python の基礎 Pythonbasics このチートシートには、変数のデータ型からリスト文字列、環境のインストールからよく使われるライブラリの使い方まで、Python の基礎知識がすべて記載されており、網羅的と言えます。初心者向けPython
どのゲームが i34150 および 1G 独立グラフィックスでのプレイに適していますか (どのゲームが i34150 に適していますか)
Jan 05, 2024 pm 08:24 PM
1G 独立グラフィックスを備えた i34150 ではどのようなゲームをプレイできますか? LoL などの小さなゲームもプレイできますか? GTX750 および GTX750TI は、グラフィックス カードの選択肢として非常に適しています。小規模なゲームをプレイするだけの場合、またはゲームをプレイしない場合は、i34150 統合グラフィックス カードを使用することをお勧めします。一般に、グラフィックス カードとプロセッサーの価格差はそれほど大きくないため、合理的な組み合わせを選択することが重要です。 2G のビデオ メモリが必要な場合は、GTX750TI を選択することをお勧めします。1G のビデオ メモリのみが必要な場合は、GTX750 を選択してください。 GTX750TI は、オーバークロック機能を備えた GTX750 の強化版と見なされます。どのグラフィックス カードを i34150 と組み合わせることができるかはニーズによって異なります。スタンドアロン ゲームをプレイする予定がある場合は、グラフィックス カードの変更を検討することをお勧めします。選んでいいですよ
HTML キャッシュ メカニズムの秘密を明らかにする: 必須の知識ポイント
Jan 23, 2024 am 08:51 AM
HTML キャッシュ メカニズムの秘密: 重要な知識ポイント、具体的なコード例が必要 Web 開発では、パフォーマンスが常に重要な考慮事項です。 HTML キャッシュ メカニズムは、Web ページのパフォーマンスを向上させるための鍵の 1 つです。この記事では、HTML キャッシュ メカニズムの原理と実践的なスキルを明らかにし、具体的なコード例を示します。 1. HTML キャッシュ機構の原理 Web ページにアクセスする際、ブラウザは HTTP プロトコルを介してサーバーに HTML ページの取得を要求します。 HTML キャッシュ メカニズムは、HTML ページをブラウザーにキャッシュします。
応用物理学にはどのようなコンピュータ機器が必要ですか（応用物理学に必要な科目は何ですか）
Dec 30, 2023 pm 12:11 PM
応用物理学に使用するコンピュータには高いパフォーマンスが必要です。 2. その理由は、物理学専攻には多数のデータ処理、シミュレーション計算、プログラミング タスクが含まれており、これらのタスクをサポートするにはより高度な構成のコンピューターが必要になるためです。プロセッサのパフォーマンスとメモリ容量が向上すると、コンピューティング速度と動作効率が向上し、ストレージ スペースが大きくなると大量のデータとシミュレーション結果を保存でき、グラフィックス カードのパフォーマンスが向上すると、物理シミュレーションと視覚化タスクをサポートできます。 3. さらに、物理学を専攻する学生は、数値計算ソフトウェア、シミュレーション ソフトウェア、データ分析ソフトウェアなどの特定のソフトウェア ツールを使用する必要がある場合もあります。これらのソフトウェアには、コンピュータの構成にも特定の要件があります。したがって、学習や研究作業をより適切にサポートするために、物理学の学生は通常、より高い構成のコンピュータを選択する必要があります。
MySQL データ型の詳細な説明: 知っておくべきこと
Jun 15, 2023 am 08:56 AM
MySQL は世界で最も人気のあるリレーショナル データベース管理システムの 1 つであり、その信頼性、高いセキュリティ、高いスケーラビリティ、および比較的低コストの理由から広く使用されています。 MySQL データ型は、さまざまなデータ型の保存方法を定義し、MySQL の重要な部分です。この記事では、MySQL のデータ型と実際のアプリケーションで注意する必要がある知識のポイントについて詳しく説明します。 1. MySQL データ型の分類 MySQL データ型は次のカテゴリに分類できます。 整数型: TINYINT、
ネットワークセキュリティ入門：初心者にとって必須の知識ポイントは何ですか？
Jun 11, 2023 am 09:57 AM
ネットワークセキュリティ入門：初心者にとって必須の知識ポイントは何ですか？近年、インターネットの急速な発展に伴い、ネットワークセキュリティへの注目が高まっています。しかし、多くの人にとって、ネットワーク セキュリティは依然として未知の海です。では、ネットワーク セキュリティを始めるために、初心者はどのような重要な知識を習得する必要があるのでしょうか?この記事ではそれを整理します。 1. ネットワーク攻撃と脅威 まず第一に、ネットワーク攻撃と脅威の種類を理解することは、ネットワーク セキュリティを始めるために習得しなければならない知識点です。フィッシング攻撃、マルウェア、ランサムウェアなど、サイバー攻撃にはさまざまな種類があります。
Oracle のデータ型が明らかに: 知っておくべき知識ポイント
Mar 07, 2024 pm 05:18 PM
Oracle データ型の明らかに: 理解する必要がある知識ポイント、必要な具体的なコード例 Oracle は、世界有数のデータベース管理システムの 1 つとして、データの保存と処理において重要な役割を果たしています。 Oracleでは、データ型はデータベースにおけるデータの格納形式、範囲、操作方法を定義する非常に重要な概念です。この記事では、Oracle データ型のさまざまな知識ポイントを明らかにし、特定のコード例を通じてその使用法と特性を示します。 1. 一般的なデータ型 文字データ型
重要な知識ポイント: CSS レスポンシブ レイアウトをマスターするための必須スキル
Feb 24, 2024 pm 10:09 PM
重要な知識ポイント: CSS レスポンシブ レイアウトの必須スキルを習得するには、特定のコード サンプルが必要です。現代のインターネット時代では、モバイル デバイスを使用して Web ページを閲覧する人が増えているため、Web ページのレスポンシブ レイアウトが特に重要になっています。レスポンシブ レイアウトとは、さまざまな画面サイズやデバイスの種類に応じて Web ページのレイアウトとスタイルを自動的に調整し、さまざまなユーザー エクスペリエンスに適応できることを意味します。 CSS レスポンシブ レイアウトのスキルを習得することは、フロントエンド開発者にとって必須です。この記事では、いくつかの重要な知識ポイントとテクニックを紹介し、具体的なコード例を示します。メディアを使用する
