img.onload에 대한 지식 포인트는 무엇입니까?-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

img.onload에 대한 지식 포인트는 무엇입니까?

一个新手

Sep 11, 2017 am 09:04 AM

어느지식 포인트

머리말:
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(&#39;----111----&#39;);        // 如果图片已经存在于浏览器缓存，直接调用回调函数
        if (img.complete) {
            callback(img);            // 直接返回，不用再处理onload事件
            return ;
        }
        img.onload = function() {
            console.log(&#39;----333----&#39;);             //图片下载完毕时异步调用callback函数
            callback(img);
        }
        console.log(&#39;----222----&#39;);
    }    function call(img) {
        // 有权访问另一个函数作用域内变量的函数都是闭包
        $(img).appendTo(&#39;.box&#39;);
    }
     loadImage(&#39;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&#39;,call);  
    //loadImage(&#39;./img/bird.png&#39;, 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

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页面缓存在浏览器

MySQL数据类型详解：你需要知道的知识点Jun 15, 2023 am 08:56 AM

MySQL是世界上最流行的关系型数据库管理系统之一，因其可靠性、高安全性、高扩展性以及相对低的成本而得到了广泛应用。MySQL的数据类型定义了各种数据类型的存储方式，是MySQL的重要组成部分。本文将详解MySQL的数据类型，以及在实际应用中需要注意的一些知识点。一、MySQL的数据类型分类MySQL的数据类型可以分为以下几类：整数类型：包括TINYINT、

应用物理学需要哪种电脑设备(应用物理学的必修课程有哪些)Dec 30, 2023 pm 12:11 PM

应用物理学要用什么电脑需要较高的性能。2.原因是物理学专业涉及到大量的数据处理、模拟计算和编程任务，需要一台配置较高的电脑来支持这些工作。较高的处理器性能和内存容量可以提高计算速度和运行效率，较大的存储空间可以存储大量的数据和模拟结果，而较好的显卡性能可以支持物理模拟和可视化任务。3.此外，物理学专业的学生可能还需要使用一些特定的软件工具，如数值计算软件、模拟软件和数据分析软件等，这些软件对电脑配置也有一定的要求。因此，为了更好地支持学习和研究工作，物理学专业的学生通常需要选择一台配置较高的电脑

Oracle数据类型大揭秘：你必须了解的知识点Mar 07, 2024 pm 05:18 PM

Oracle数据类型大揭秘：你必须了解的知识点，需要具体代码示例Oracle作为世界领先的数据库管理系统之一，在数据存储和处理中扮演着重要的角色。在Oracle中，数据类型是非常重要的概念，它定义了数据在数据库中的存储格式、范围和操作方式。本文将揭示Oracle数据类型的各种知识点，并且通过具体的代码示例展示它们的用法和特点。一、常见的数据类型字符型数据类型

网络安全入门：初学者必备知识点是什么？Jun 11, 2023 am 09:57 AM

网络安全入门：初学者必备知识点是什么？近年来，随着互联网的高速发展，网络安全越来越引起人们的重视。然而，对于很多人来说，网络安全依然是一片未知的海洋。那么，网络安全入门，初学者需要掌握哪些必备知识点呢？本文将为大家梳理一下。一、网络攻击与威胁首先，了解网络攻击和威胁的类型是入门网络安全所必须掌握的知识点。网络攻击的种类多种多样，如钓鱼攻击、恶意软件、勒索软件

重要知识点：掌握CSS响应式布局的必备技巧Feb 24, 2024 pm 10:09 PM

重要知识点：掌握CSS响应式布局的必备技巧，需要具体代码示例在现代互联网时代，越来越多的人使用移动设备来浏览网页，因此网页的响应式布局变得尤为重要。响应式布局是指网页能够根据不同的屏幕尺寸和设备类型自动调整布局和样式，以适应不同的用户体验。掌握CSS响应式布局的技巧对于前端开发人员来说是必备的。本文将介绍一些重要的知识点和技巧，并提供具体的代码示例。使用媒体

See all articles