有關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中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Python速查表大全，你掌握了哪些知識點？
Apr 26, 2023 pm 10:49 PM
Python作為當下最大眾化的程式語言，相信每天都會有大量的新手朋友進入學習大軍的行列。但無論語言是多麼的容易學習，其基本概念、基礎知識還是比較多的，對於小白來說，一時間要掌握這麼多還是有些吃力。今天精選收集了眾多Python相關的知識速查表，可以說是包羅萬象，以後媽媽再也不用擔心大家記不住任何知識點了！ Python基礎Pythonbasics這個速查表包含了所有的Python基本知識，從變數資料型別到列表字串，從環境安裝到常用函式庫的使用，可以說面面俱到。 Beginner'sPytho
i34150搭配1G獨顯適合玩哪些遊戲(i34150適用於哪些遊戲)
Jan 05, 2024 pm 08:24 PM
i34150搭配1G獨顯能玩哪些遊戲能玩lol等小遊戲。 GTX750和GTX750TI是非常適合的顯示卡選擇。如果只是玩一些小遊戲或不玩遊戲，建議使用i34150的整合式顯示卡就可以了。一般來說，顯示卡和處理器的搭配差價並不是很大，所以選擇合理的搭配是很重要的。若需要2G顯存，建議選擇GTX750TI；若只需要1G顯存，直接選擇GTX750即可。 GTX750TI可以看作是GTX750的增強版本，具有超頻功能。 i34150可以搭配什麼顯示卡依需求，如果你打算玩單機遊戲，建議你考慮更換顯示卡。你可以選擇
揭秘HTML快取機制：不可或缺的知識要點
Jan 23, 2024 am 08:51 AM
HTML快取機制大揭密：必備的知識點，需要具體程式碼範例在Web開發中，效能一直是重要的考量。而HTML快取機制是提升Web頁面效能的關鍵之一。本文將揭秘HTML快取機制的原理與實務技巧，並提供具體的程式碼範例。一、HTML快取機制的原理Web頁面存取過程中，瀏覽器透過HTTP協定請求伺服器取得HTML頁面。 HTML快取機制就是將HTML頁面快取在瀏覽器
應用物理學需要哪一種電腦設備(應用物理學的必修課程有哪些)
Dec 30, 2023 pm 12:11 PM
應用物理學要用什麼電腦需要較高的效能。 2.原因是物理學專業涉及大量的資料處理、模擬計算和程式設計任務，需要一台配置較高的電腦來支援這些工作。較高的處理器效能和記憶體容量可以提高運算速度和運行效率，較大的儲存空間可以儲存大量的資料和模擬結果，而較好的顯示卡效能可以支援實體模擬和視覺化任務。 3.此外，物理學系的學生可能還需要使用一些特定的軟體工具，如數值計算軟體、模擬軟體和數據分析軟體等，這些軟體對電腦配置也有一定的要求。因此，為了更好地支持學習和研究工作，物理學專業的學生通常需要選擇一台配置較高的電腦
網路安全入門：初學者必備知識點是什麼？
Jun 11, 2023 am 09:57 AM
網路安全入門：初學者必備知識點是什麼？近年來，隨著網路的高速發展，網路安全越來越引起人們的重視。然而，對許多人來說，網路安全依然是一片未知的海洋。那麼，網路安全入門，初學者需要掌握哪些必備知識點呢？本文將為大家整理一下。一、網路攻擊與威脅首先，了解網路攻擊和威脅的類型是入門網路安全所必須掌握的知識點。網路攻擊的種類多種多樣，如釣魚攻擊、惡意軟體、勒索軟體
MySQL資料類型詳解：你需要知道的知識點
Jun 15, 2023 am 08:56 AM
MySQL是世界上最受歡迎的關聯式資料庫管理系統之一，因其可靠性、高安全性、高擴展性以及相對低的成本而得到了廣泛應用。 MySQL的資料類型定義了各種資料類型的儲存方式，是MySQL的重要組成部分。本文將詳解MySQL的資料類型，以及在實際應用中需要注意的一些知識點。一、MySQL的資料型態分類MySQL的資料型態可以分為以下幾類：整數型態：包括TINYINT、
Oracle資料型態大揭密：你必須了解的知識點
Mar 07, 2024 pm 05:18 PM
Oracle資料型態大揭密：你必須了解的知識點，需要具體程式碼範例Oracle作為世界領先的資料庫管理系統之一，在資料儲存與處理中扮演著重要的角色。在Oracle中，資料類型是非常重要的概念，它定義了資料在資料庫中的儲存格式、範圍和操作方式。本文將揭示Oracle資料類型的各種知識點，並透過具體的程式碼範例展示它們的用法和特點。一、常見的資料類型字元型資料類型
重要知識點：掌握CSS響應式佈局的必備技巧
Feb 24, 2024 pm 10:09 PM
重要知識點：掌握CSS響應式佈局的必備技巧，需要具體程式碼範例在現代互聯網時代，越來越多的人使用行動裝置來瀏覽網頁，因此網頁的響應式佈局變得尤為重要。響應式佈局是指網頁能夠根據不同的螢幕尺寸和裝置類型自動調整佈局和樣式，以適應不同的使用者體驗。掌握CSS響應式佈局的技巧對於前端開發人員來說是必備的。本文將介紹一些重要的知識點和技巧，並提供具體的程式碼範例。使用媒體
