有关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的调用。Atas ialah kandungan terperinci 有关img.onload知识点有哪些. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Koleksi helaian cheat Python, apakah mata pengetahuan yang telah anda kuasai?
Apr 26, 2023 pm 10:49 PM
Python adalah bahasa pengaturcaraan yang paling popular pada masa ini. Saya percaya bahawa sebilangan besar rakan baru akan menyertai barisan pembelajaran setiap hari. Walau bagaimanapun, betapa mudahnya sesuatu bahasa itu dipelajari, masih terdapat banyak konsep asas dan pengetahuan asas Bagi seorang pemula, ia masih sukar untuk menguasai begitu banyak sekali. Hari ini saya telah mengumpulkan banyak helaian tipu ilmu berkaitan Python, yang boleh dikatakan merangkumi semua Pada masa akan datang, ibu tidak perlu lagi risau tentang semua orang tidak dapat mengingati apa-apa mata pengetahuan! Asas Python Asas Python Helaian cheat ini mengandungi semua pengetahuan asas Python, daripada jenis data berubah-ubah kepada rentetan senarai, daripada pemasangan persekitaran kepada penggunaan perpustakaan yang biasa digunakan, ia boleh dikatakan komprehensif. Pemula'sPytho
Permainan manakah yang sesuai untuk bermain dengan grafik bebas i34150 dan 1G (permainan manakah yang sesuai untuk i34150)
Jan 05, 2024 pm 08:24 PM
Apakah permainan yang boleh dimainkan dengan i34150 dengan grafik bebas 1G. Bolehkah ia bermain permainan kecil seperti LoL? GTX750 dan GTX750TI adalah pilihan kad grafik yang sangat sesuai. Jika anda hanya bermain beberapa permainan kecil atau tidak bermain permainan, adalah disyorkan untuk menggunakan kad grafik bersepadu i34150. Secara umumnya, perbezaan harga antara kad grafik dan pemproses tidak begitu besar, jadi adalah penting untuk memilih kombinasi yang munasabah. Jika anda memerlukan memori video 2G, disyorkan untuk memilih GTX750TI jika anda hanya memerlukan memori video 1G, pilih sahaja GTX750; GTX750TI boleh dilihat sebagai versi GTX750 yang dipertingkatkan, dengan keupayaan overclocking. Kad grafik yang boleh dipasangkan dengan i34150 bergantung pada keperluan anda Jika anda bercadang untuk bermain permainan bersendirian, anda disyorkan untuk mempertimbangkan untuk menukar kad grafik. anda boleh memilih
Mendedahkan rahsia mekanisme caching HTML: mata pengetahuan penting
Jan 23, 2024 am 08:51 AM
Rahsia mekanisme caching HTML: mata pengetahuan penting, contoh kod khusus diperlukan Dalam pembangunan web, prestasi sentiasa menjadi pertimbangan penting. Mekanisme caching HTML adalah salah satu kunci untuk meningkatkan prestasi halaman web. Artikel ini akan mendedahkan prinsip dan kemahiran praktikal mekanisme caching HTML, dan memberikan contoh kod khusus. 1. Prinsip mekanisme caching HTML Semasa proses mengakses halaman Web, pelayar meminta pelayan untuk mendapatkan halaman HTML melalui protokol HTTP. Mekanisme caching HTML adalah untuk cache halaman HTML dalam penyemak imbas
Apakah jenis peralatan komputer yang diperlukan untuk fizik gunaan (apakah kursus yang diperlukan untuk fizik gunaan)
Dec 30, 2023 pm 12:11 PM
Komputer yang digunakan untuk fizik gunaan memerlukan prestasi tinggi. 2. Sebabnya ialah jurusan fizik melibatkan sejumlah besar pemprosesan data, pengiraan simulasi dan tugas pengaturcaraan, dan memerlukan komputer dengan konfigurasi yang lebih tinggi untuk menyokong tugasan ini. Prestasi pemproses dan kapasiti memori yang lebih tinggi boleh meningkatkan kelajuan pengkomputeran dan kecekapan operasi, ruang storan yang lebih besar boleh menyimpan sejumlah besar data dan hasil simulasi, dan prestasi kad grafik yang lebih baik boleh menyokong simulasi fizikal dan tugasan visualisasi. 3. Selain itu, pelajar jurusan fizik juga mungkin perlu menggunakan beberapa alat perisian tertentu, seperti perisian pengiraan berangka, perisian simulasi dan perisian analisis data Perisian ini juga mempunyai keperluan tertentu untuk konfigurasi komputer. Oleh itu, untuk menyokong kerja kajian dan penyelidikan dengan lebih baik, pelajar fizik biasanya perlu memilih komputer dengan konfigurasi yang lebih tinggi
Penjelasan terperinci tentang jenis data MySQL: mata pengetahuan yang perlu anda ketahui
Jun 15, 2023 am 08:56 AM
MySQL ialah salah satu sistem pengurusan pangkalan data hubungan yang paling popular di dunia dan digunakan secara meluas kerana kebolehpercayaannya, keselamatan yang tinggi, berskala tinggi dan kos yang agak rendah. Jenis data MySQL mentakrifkan kaedah penyimpanan pelbagai jenis data dan merupakan bahagian penting MySQL. Artikel ini akan menerangkan secara terperinci jenis data MySQL dan beberapa titik pengetahuan yang perlu diberi perhatian dalam aplikasi praktikal. 1. Klasifikasi jenis data MySQL Jenis data MySQL boleh dibahagikan kepada kategori berikut: Jenis integer: termasuk TINYINT,
Pengenalan kepada keselamatan rangkaian: Apakah mata pengetahuan penting untuk pemula?
Jun 11, 2023 am 09:57 AM
Pengenalan kepada keselamatan rangkaian: Apakah mata pengetahuan penting untuk pemula? Dalam beberapa tahun kebelakangan ini, dengan perkembangan pesat Internet, keselamatan rangkaian telah menarik lebih banyak perhatian. Walau bagaimanapun, bagi kebanyakan orang, keselamatan rangkaian masih merupakan lautan yang tidak diketahui. Jadi, untuk bermula dengan keselamatan rangkaian, apakah pengetahuan penting yang perlu dikuasai oleh pemula? Artikel ini akan menyelesaikannya untuk anda. 1. Serangan dan ancaman rangkaian Pertama sekali, memahami jenis serangan dan ancaman rangkaian adalah titik pengetahuan yang mesti dikuasai untuk memulakan keselamatan rangkaian. Terdapat banyak jenis serangan siber seperti serangan phishing, malware, ransomware
Jenis data Oracle didedahkan: mata pengetahuan yang anda mesti tahu
Mar 07, 2024 pm 05:18 PM
Jenis Data Oracle Didedahkan: Mata Pengetahuan Yang Anda Mesti Faham, Contoh Kod Khusus Diperlukan Oracle, sebagai salah satu sistem pengurusan pangkalan data terkemuka di dunia, memainkan peranan penting dalam penyimpanan dan pemprosesan data. Dalam Oracle, jenis data adalah konsep yang sangat penting, yang mentakrifkan format penyimpanan, julat dan kaedah operasi data dalam pangkalan data. Artikel ini akan mendedahkan pelbagai mata pengetahuan tentang jenis data Oracle dan menunjukkan penggunaan serta cirinya melalui contoh kod tertentu. 1. Jenis data biasa jenis data aksara
Mata pengetahuan penting: kemahiran penting untuk menguasai reka letak responsif CSS
Feb 24, 2024 pm 10:09 PM
Mata pengetahuan penting: Untuk menguasai kemahiran penting reka letak responsif CSS, contoh kod khusus diperlukan Dalam era Internet moden, semakin ramai orang menggunakan peranti mudah alih untuk menyemak imbas halaman web, jadi reka letak halaman web yang responsif telah menjadi sangat penting. Reka letak responsif bermakna halaman web boleh melaraskan reka letak dan gayanya secara automatik mengikut saiz skrin dan jenis peranti yang berbeza untuk menyesuaikan diri dengan pengalaman pengguna yang berbeza. Menguasai kemahiran reka letak responsif CSS adalah satu kemestian untuk pembangun bahagian hadapan. Artikel ini akan memperkenalkan beberapa perkara dan teknik pengetahuan yang penting, serta memberikan contoh kod khusus. guna media
