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 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7485
15
1377
52
77
11
51
19
19
38
Python 치트 시트 모음, 어떤 지식 포인트를 마스터하셨나요?
Apr 26, 2023 pm 10:49 PM
Python은 현재 가장 인기 있는 프로그래밍 언어입니다. 저는 수많은 초보 친구들이 매일 학습 대열에 합류할 것이라고 믿습니다. 하지만 아무리 배우기 쉬운 언어라 할지라도 초보자에게는 여전히 많은 기본 개념과 기본 지식이 있어서 한 번에 익히기가 어렵습니다. 오늘은 포괄적이라고 할 수 있는 파이썬 관련 지식 치트시트를 많이 모았습니다. 앞으로 엄마는 더 이상 모든 사람이 지식 포인트를 기억하지 못할까 봐 걱정할 필요가 없습니다! Python 기초 Pythonbasics 이 치트 시트에는 변수 데이터 유형부터 목록 문자열, 환경 설치부터 일반적으로 사용되는 라이브러리 사용까지 Python에 대한 모든 기본 지식이 포함되어 있어 포괄적이라고 할 수 있습니다. 초보자의Pytho
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 캐싱 메커니즘의 비밀: 필수 지식 포인트, 특정 코드 예제가 필요합니다. 웹 개발에서 성능은 항상 중요한 고려 사항이었습니다. HTML 캐싱 메커니즘은 웹 페이지 성능을 향상시키는 핵심 중 하나입니다. 이 기사에서는 HTML 캐싱 메커니즘의 원리와 실제 기술을 공개하고 구체적인 코드 예제를 제공합니다. 1. HTML 캐싱 메커니즘의 원리 웹 페이지에 액세스하는 동안 브라우저는 HTTP 프로토콜을 통해 HTML 페이지를 가져오도록 서버에 요청합니다. HTML 캐싱 메커니즘은 브라우저에서 HTML 페이지를 캐시하는 것입니다.
응용물리학에는 어떤 컴퓨터 장비가 필요한가요? (응용물리학 필수과목은 무엇인가요?)
Dec 30, 2023 pm 12:11 PM
응용 물리학에 사용할 컴퓨터에는 고성능이 필요합니다. 2. 그 이유는 물리학 전공에는 수많은 데이터 처리, 시뮬레이션 계산 및 프로그래밍 작업이 포함되며 이러한 작업을 지원하려면 더 높은 구성의 컴퓨터가 필요하기 때문입니다. 더 높은 프로세서 성능과 메모리 용량은 컴퓨팅 속도와 운영 효율성을 향상시킬 수 있고, 더 큰 저장 공간은 많은 양의 데이터와 시뮬레이션 결과를 저장할 수 있으며, 더 나은 그래픽 카드 성능은 물리적 시뮬레이션 및 시각화 작업을 지원할 수 있습니다. 3. 또한 물리학을 전공하는 학생들은 수치 계산 소프트웨어, 시뮬레이션 소프트웨어, 데이터 분석 소프트웨어와 같은 특정 소프트웨어 도구를 사용해야 할 수도 있습니다. 이러한 소프트웨어에는 컴퓨터 구성에 대한 특정 요구 사항이 있습니다. 따라서 학습 및 연구 작업을 더 잘 지원하기 위해 물리학을 전공하는 학생들은 일반적으로 더 높은 구성의 컴퓨터를 선택해야 합니다.
MySQL 데이터 유형에 대한 자세한 설명: 알아야 할 사항
Jun 15, 2023 am 08:56 AM
MySQL은 세계에서 가장 널리 사용되는 관계형 데이터베이스 관리 시스템 중 하나이며 안정성, 높은 보안, 높은 확장성 및 상대적으로 저렴한 비용으로 인해 널리 사용됩니다. 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은 데이터 저장 및 처리에서 중요한 역할을 합니다. 오라클에서 데이터 타입(Data Type)은 데이터베이스에 존재하는 데이터의 저장 형식, 범위, 연산 방식 등을 정의하는 매우 중요한 개념이다. 이 기사에서는 Oracle 데이터 유형에 대한 다양한 지식 포인트를 공개하고 특정 코드 예제를 통해 해당 사용법과 특성을 보여줍니다. 1. 공통 데이터 유형 문자 데이터 유형
중요한 지식 포인트: CSS 반응형 레이아웃을 마스터하기 위한 필수 기술
Feb 24, 2024 pm 10:09 PM
중요한 지식 포인트: CSS 반응형 레이아웃의 필수 기술을 익히려면 구체적인 코드 예제가 필요합니다. 현대 인터넷 시대에는 점점 더 많은 사람들이 모바일 장치를 사용하여 웹 페이지를 탐색하므로 웹 페이지의 반응형 레이아웃이 특히 중요해졌습니다. 반응형 레이아웃은 웹 페이지가 다양한 화면 크기와 장치 유형에 따라 레이아웃과 스타일을 자동으로 조정하여 다양한 사용자 경험에 적응할 수 있음을 의미합니다. CSS 반응형 레이아웃 기술을 익히는 것은 프런트엔드 개발자에게 필수입니다. 이 기사에서는 몇 가지 중요한 지식과 기술을 소개하고 구체적인 코드 예제를 제공합니다. 미디어를 사용하다
