`

你真的了解图片的预加载吗

 
阅读更多
http://my.oschina.net/HerrySun/blog/658657
今天看到了一章关于图片预加载的博文,其代码如下:
function loadImage(url, callback) 
{     
    var img = new Image(); //创建一个Image对象,实现图片的预下载     
    img.src = url;     
         
    if (img.complete) 
    { // 如果图片已经存在于浏览器缓存,直接调用回调函数     
        callback(img);     
        return; // 直接返回,不用再处理onload事件     
    }     
 
   img.onload = function () { //图片下载完毕时异步调用callback函数。         
       callback(img);     
      };  
};


在网上搜索了一下相关文章,大体上都是这个思路。
这个方法功能是ok的,但是有一些隐患。
1. 创建了一个临时匿名函数来作为图片的onload事件处理函数,形成了闭包。
相信大家都看到过ie下的内存泄漏模式的文章,其中有一个模式就是循环引用,而闭包就有保存外部运行环境的能力(依赖于作用域链的实现),所以img.onload这个函数内部又保存了对img的引用,这样就形成了循环引用,导致内存泄漏。(这种模式的内存泄漏只存在低版本的ie6中,打过补丁的ie6以及高版本的ie都解决了循环引用导致的内存泄漏问题)。
2. 只考虑了静态图片的加载,忽略了gif等动态图片,这些动态图片可能会多次触发onload。
要解决上面两个问题很简单,其实很简单,代码如下:
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的状态),但是对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的调用
分享到:
评论

相关推荐

    jQuery实现图片预加载

    **jQuery实现图片预加载** 在Web开发中,用户体验是一个至关重要的因素,而图片加载速度直接影响着用户对网站的第一印象。为了提升用户体验,开发者通常会采用图片预加载技术,确保图片在用户需要时能够快速显示。...

    图片预加载学习(一):无序加载之图片切换

    通过上述讨论,我们可以了解到图片预加载在提升网页性能和用户体验方面的价值。实践中,开发者需要根据具体项目需求和资源限制选择合适的预加载策略,并不断优化以达到最佳效果。阅读提供的链接和压缩包内的资源,...

    带有图片预加载技术的jquery图片幻灯代码.rar

    这个名为"带有图片预加载技术的jquery图片幻灯代码.rar"的压缩包文件提供了一个实现这一目标的实例,它是一个基于jQuery库的图片幻灯插件。下面将详细解释这个插件的工作原理、涉及的技术以及其对网页性能的影响。 ...

    jQuery瀑布流图片预加载展示代码.zip

    《jQuery瀑布流图片预加载展示代码详解》 在网页设计中,瀑布流布局因其独特的视觉效果和用户体验,已经成为一种常见的展示方式,尤其在图片展示领域更是广泛应用。本篇文章将深入探讨一个基于modernizr.js实现的...

    图片预加载学习(二):有序加载之图片切换

    在本文中,我们将深入探讨“图片预加载学习”的第二部分,重点关注有序加载和图片切换的实现。这个主题对于优化网页性能和提供流畅的用户...对于开发人员来说,这是一次深入了解图片预加载机制并实践有序加载的好机会。

    微信小程序的图片预加载组件.rar

    在微信小程序开发中,图片预加载是一个非常关键的优化步骤,尤其对于图片密集型的应用,如电商、社交或游戏类应用。预加载技术允许开发者在用户实际需要之前提前下载图片资源,减少用户等待时间,提升用户体验。这个...

    jQuery页面区域预加载代码.zip

    预加载是指在用户实际交互之前,预先加载部分或全部页面资源,如图片、CSS、JavaScript等。这样做的目的是减少用户等待时间,使页面元素在用户需要时能够迅速显示出来,从而提高页面的响应速度和用户的满意度。 ...

    swf预加载类

    总的来说,了解并熟练掌握SWF预加载类的原理和实现方式对于提升Flash应用程序的用户体验至关重要。无论是简单的进度条还是复杂的预加载界面,都能体现出开发者对用户需求的细心关注和专业技能的体现。

    预加载特效

    预加载特效是网页设计中的一种常见技术,用于改善用户体验,特别是在加载大容量资源如图片、音频或视频时。预加载的目的是在用户实际交互之前就开始加载页面中的关键内容,这样可以减少用户等待时间,使页面感觉更加...

    jquery插件,图片预加载,自适应宽高的图片slide,autoimgv1.1

    《jQuery插件:图片预加载与自适应宽高的图片Slide——深入解析autoimgv1.1》 在网页设计和开发中,优化用户体验是至关重要的,尤其是在处理图像资源时。"autoimgv1.1"是一款基于jQuery的插件,它专门解决了图片预...

    JS实现图片预加载之无序预加载功能代码

    JS实现图片预加载之无序预加载功能代码,这个主题涉及的是在网页中如何使用JavaScript技术来提前加载图片资源,以便用户在浏览网页时可以更加快速地看到图片,提升用户体验。无序预加载则是指图片的加载顺序并不是...

    通过jQuery预加载图片的方法共1页.pdf.zip

    标题“通过jQuery预加载图片的方法共1页.pdf.zip”暗示了这是一个关于使用jQuery实现图片预加载的教程文档,可能包括了具体步骤、示例代码以及相关的讨论。虽然我们无法直接查看文档内容,但根据描述,我们可以推断...

    PreLoad一个图像预加载插件以实现有序加载和无序加载

    在网页设计和开发中,图片预加载是一种优化用户体验的重要技术,尤其对于图像密集型的网站而言。PreLoad 插件正是这样一个工具,它允许开发者高效地管理图片的加载过程,无论是有序加载还是无序加载,都能确保图片在...

    Jquery实现图片预加载与延时加载的方法

    ### Jquery实现图片预加载与延时加载的方法知识点详解 ...通过上述介绍,可以了解到Jquery实现图片预加载与延时加载的方法,并通过提供的函数和示例代码,可以在实际项目中灵活运用这些技术来优化用户的浏览体验。

    jQuery 图片切换预加载插件,左右带控制按钮 修正版本.zip

    这个“jQuery 图片切换预加载插件,左右带控制按钮 修正版本.zip”文件显然包含了一个专门针对图片切换功能的jQuery插件,特别优化了用户体验,提供了左右控制按钮,并且修复了一些已知问题。 首先,让我们详细了解...

    JS图片预加载 JS实现图片预加载应用

    在本文中,我们将探讨如何使用JavaScript实现图片预加载技术,以提高网页加载速度和用户体验。通过图片预加载,可以在用户浏览网站时提前加载图片,避免在切换页面或浏览到新内容时发生延迟,从而为用户提供更加流畅...

    JS实现图片预加载无需等待

    JavaScript实现图片预加载无需等待的核心思想是通过编程预先加载图片资源,以减少用户等待图片加载的时间,提高浏览体验。这一技术在网站开发中尤为重要,尤其是在图片数量较多的页面中。传统方法是每个页面只显示...

    图片加载的Demo

    3. **图片解码**:在加载过程中,EGOImageView会预解码图片,确保显示时不会因为解码过程导致延迟。 4. **动画效果**:当图片加载完成后,EGOImageView会有一个平滑的过渡动画,使得图片的出现更加自然。 除了基本...

    JS图片预加载插件详解

    为了优化用户体验,提高页面加载速度,开发者们会使用到图片预加载技术。JS图片预加载插件是实现该技术的一种有效手段,其核心作用是提前加载图片资源,确保当用户需要查看这些图片时,它们可以迅速地从本地缓存中...

Global site tag (gtag.js) - Google Analytics