整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

3种Javascript图片预加载的方法详解

加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。

这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。本文将分享三个不同的预加载技术，来增强网站的性能与可用性。

方法一：用css和JavaScript实现预加载

实现预加载图片有很多方法，包括使用css、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案，十分高效。

单纯使用CSS，可容易、高效地预加载图片，代码如下：

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }  
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }  
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

将这三个ID选择器应用到(X)html元素中，我们便可通过CSS的background属性将图片预加载到屏幕外的背景上。

只要这些图片的路径保持不变，当它们在Web页面的其他地方被调用时，浏览器就会在渲染过程中使用预加载（缓存）的图片。简单、高效，不需要任何JavaScript。

该方法虽然高效，但仍有改进余地。使用该法加载的图片会同页面的其他内容一起加载，增加了页面的整体加载时间。

为了解决这个问题，我们增加了一些JavaScript代码，来推迟预加载的时间，直到页面加载完毕。代码如下：

function preloader() {  
    if (document.getElementById) {  
        document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";  
        document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";  
        document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";  
    }  
}  
function addLoadEvent(func) {  
    var oldonload = window.onload;  
    if (typeof window.onload != 'function') {  
        window.onload = func;  
    } else {  
        window.onload = function() {  
            if (oldonload) {  
                oldonload();  
            }  
            func();  
        }  
    }  
}  
addLoadEvent(preloader);

在该脚本的第一部分，我们获取使用类选择器的元素，并为其设置了background属性，以预加载不同的图片。

该脚本的第二部分，我们使用addLoadEvent()函数来延迟preloader()函数的加载时间，直到页面加载完毕。

如果JavaScript无法在用户的浏览器中正常运行，会发生什么？很简单，图片不会被预加载，当页面调用图片时，正常显示即可。

方法二：仅使用JavaScript实现预加载

上述方法有时确实很高效，但我们逐渐发现它在实际实现过程中会耗费太多时间。相反，我更喜欢使用纯JavaScript来实现图片的预加载。

下面将提供两种这样的预加载方法，它们可以很漂亮地工作于所有现代浏览器之上。

JavaScript代码段1

只需简单编辑、加载所需要图片的路径与名称即可，很容易实现：

<div class="hidden">  
    <script type="text/javascript">  
           var images = new Array()  
            function preload() {  
                for (i = 0; i < preload.arguments.length; i++) {  
                    images[i] = new Image()  
                    images[i].src = preload.arguments[i]  
                }  
            }  
            preload(  
                "http://domain.tld/gallery/image-001.jpg",  
                "http://domain.tld/gallery/image-002.jpg",  
                "http://domain.tld/gallery/image-003.jpg"  
            )  
</script> 
</div>

该方法尤其适用预加载大量的图片。我的画廊网站使用该技术，预加载图片数量达50多张。将该脚本应用到登录页面，只要用户输入登录帐号，大部分画廊图片将被预加载。

JavaScript代码段2

该方法与上面的方法类似，也可以预加载任意数量的图片。将下面的脚本添加入任何Web页中，根据程序指令进行编辑即可。

<div class="hidden">  
    <script type="text/javascript">  
            if (document.images) {  
                img1 = new Image();  
                img2 = new Image();  
                img3 = new Image();  
                img1.src = "http://domain.tld/path/to/image-001.gif";  
                img2.src = "http://domain.tld/path/to/image-002.gif";  
                img3.src = "http://domain.tld/path/to/image-003.gif";  
            }    
</script>  
</div>

正如所看见，每加载一个图片都需要创建一个变量，如“img1 = new Image();”，及图片源地址声明，如“img3.src = “../path/to/image-003.gif”;”。参考该模式，你可根据需要加载任意多的图片。

我们又对该方法进行了改进。将该脚本封装入一个函数中，并使用 addLoadEvent（），延迟预加载时间，直到页面加载完毕。

function preloader() {  
    if (document.images) {  
        var img1 = new Image();  
        var img2 = new Image();  
        var img3 = new Image();  
        img1.src = "http://domain.tld/path/to/image-001.gif";  
        img2.src = "http://domain.tld/path/to/image-002.gif";  
        img3.src = "http://domain.tld/path/to/image-003.gif";  
    }  
}  
function addLoadEvent(func) {  
    var oldonload = window.onload;  
    if (typeof window.onload != 'function') {  
        window.onload = func;  
    } else {  
        window.onload = function() {  
            if (oldonload) {  
                oldonload();  
            }  
            func();  
        }  
    }  
}  
addLoadEvent(preloader);

方法三：使用Ajax实现预加载

上面所给出的方法似乎不够酷，那现在来看一个使用Ajax实现图片预加载的方法。该方法利用DOM，不仅仅预加载图片，还会预加载CSS、JavaScript等相关的东西。使用Ajax，比直接使用JavaScript，优越之处在于JavaScript和CSS的加载不会影响到当前页面。该方法简洁、高效。

window.onload = function() {  
    setTimeout(function() {  
        // XHR to request a js and a CSS  
        var xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.js');  
        xhr.send('');  
        xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.css');  
        xhr.send('');  
        // preload image  
        new Image().src = "http://domain.tld/preload.png";  
    }, 1000);  
};

上面代码预加载了“preload.js”、“preload.css”和“preload.png”。1000毫秒的超时是为了防止脚本挂起，而导致正常页面出现功能问题。

下面，我们看看如何用JavaScript来实现该加载过程：

window.onload = function() {  
    setTimeout(function() {  
        // reference to <head>  
        var head = document.getElementsByTagName('head')[0];  
        // a new CSS  
        var css = document.createElement('link');  
        css.type = "text/css";  
        css.rel  = "stylesheet";  
        css.href = "http://domain.tld/preload.css";  
        // a new JS  
        var js  = document.createElement("script");  
        js.type = "text/javascript";  
        js.src  = "http://domain.tld/preload.js";  
        // preload JS and CSS  
        head.appendChild(css);  
        head.appendChild(js);  
        // preload image  
        new Image().src = "http://domain.tld/preload.png";  
    }, 1000); 
};

这里，我们通过DOM创建三个元素来实现三个文件的预加载。正如上面提到的那样，使用Ajax，加载文件不会应用到加载页面上。从这点上看，Ajax方法优越于JavaScript。


- End -

聊聊图片预加载：提升用户体验与性能的秘密武器

**引言：**

在Web前端开发中，图片资源的加载速度直接影响着用户体验和页面性能。尤其是在涉及到大量图片展示的网站或应用中，图片预加载作为一种优化手段显得尤为重要。本文将详细介绍图片预加载的原理、应用场景、实现方法以及相关注意事项，并通过具体的HTML+JS代码实例，让你深入了解如何运用预加载技术改善用户的浏览体验。

---

### **一、什么是图片预加载？**

**标题：未雨绸缪，提前加载的背后逻辑**

图片预加载是指在用户实际查看图片之前，预先将图片资源加载到浏览器缓存中。这样当用户浏览到对应位置时，图片已经处于可用状态，从而避免了图片加载导致的页面空白或延迟现象，显著提升了页面的流畅性和整体性能。

---

### **二、图片预加载的重要性**

**标题：瞬间加载，用户体验的飞跃**

1. **更快的视觉呈现**：预加载能够确保图片在用户视线到达前就已经准备好，减少用户等待图片加载的时间，提供即视即所得的浏览体验。

2. **优化页面滚动流畅性**：对于长页面和图片瀑布流等场景，预加载能够消除滚屏时的图片加载滞后问题，确保页面滚动过程平滑无阻。

3. **降低用户跳出率**：快速加载的内容能够增加用户留存，减少因等待时间过长而导致的用户流失。

---

### **三、图片预加载的实现方法**

**标题：实战演练，手把手教你实现预加载**

1. **HTML `<link rel="prefetch">` 方式**

```html

<link rel="prefetch" href="image.jpg">

```

`rel="prefetch"` 属性告诉浏览器在闲置时预先下载指定资源，适用于浏览器支持的情况下对将来可能访问的资源进行预加载。

2. **JavaScript 实现预加载**

```javascript

// 基础图片预加载函数

function preloadImages(urls) {

urls.forEach(function(url) {

var img = new Image();

img.src = url;

});

}

// 使用预加载函数

var imageUrls = ['image1.jpg', 'image2.jpg'];

preloadImages(imageUrls);

```

上述JavaScript代码中，我们通过创建新的`Image`对象并设置其`src`属性为待加载图片URL的方式实现预加载。当浏览器解析到这一行代码时，就会立即发送请求加载图片资源。

3. **更进阶的预加载库（如lozad.js）**

```html

<!-- 引入lozad.js库 -->

<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

<!-- 使用lozad.js进行懒加载 -->

<img

data-src="image.jpg"

class="lozad"

alt="Example Image"

/>

```

Lozad.js是一个轻量级的懒加载库，它能够在图片进入可视区时才进行加载，既实现了预加载的目的，又节省了带宽和CPU资源。

---

### **四、图片预加载的注意事项**

**标题：谨慎而行，预加载的合理应用**

1. **合理安排预加载数量**：过多的预加载可能导致带宽占用过高，影响其他关键资源加载速度。

2. **判断用户网络状况**：在低速网络环境下，避免无脑预加载，可采用动态加载策略。

3. **隐私保护与资源优化**：尊重用户隐私，避免预加载无关紧要的资源，同时对图片进行压缩和尺寸裁剪，减轻预加载负担。

---

**结语：**

图片预加载作为Web前端优化的一项关键技术，巧妙运用可以显著提升用户体验，降低用户流失率。在实践中，我们要根据具体项目需求和用户场景，灵活选择合适的预加载策略，做到既能加速页面渲染，又能兼顾性能与资源优化，达到提升网站整体表现的终极目标。而不断精进和深化前端优化技术，正是每一位前端开发者追求卓越的必由之路。

言

随着Flutter稳定版本逐步迭代更新，京东APP内部的Flutter业务也日益增多，Flutter开发为我们提供了高效的开发环境、优秀的跨平台适配、丰富的功能组件及动画、接近原生的交互体验，但随之也带来了一些OOM问题，通过线上监控信息和Observatory工具结合分析我们发现问题的原因是由于Flutter页面中加载的大量图片导致的内存溢出，这也是在原生开发中常见的问题之一，Flutter官方为我们提供的Image widget实现图片加载及显示，只有了解Flutter中图片的加载原理及图片内存管理方式才能真正发现问题的本质，本文将重点介绍Flutter中图片的加载原理，使用过程中有哪些需要注意的地方及优化思路和手段，希望能给大家带来一些启发和帮助。

基本使用

下面是 Image 的基本使用方法，image参数是 Image 控件中的必选参数，也是数据源类型可以是Asset、网络、文件、内存，下面将以我们常用的网络图片加载方式为例子讲解原理，基本使用如下：

Image(

 image: NetworkImage(

     "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),

 width: 100.0,

 heitht: 100.0

)

Image 控件的使用方法这里就不在展开了，控件的参数及API详情请参阅：https://api.flutter.dev/flutter/widgets/Image-class.html

图片加载流程

Flutter 的图片加载原理与原生客户端中的图片框架加载原理相似，具体可点击下方大图查看，加载步骤如下：

1、 区分数据来源生成缓存列表中数据映射的唯一key；

2、 通过key读取缓存列表中的图片数据；

3、 缓存存在，返回已存在的图片数据；

4、 缓存不存在，按来源加载图片数据，解码后同步到缓存中并返回；

5、 设置回调监听图片数据加载状态，数据加载完成后重新渲染控件显示图片；

大家可能注意到了上面流程图中的文件缓存部分是灰色的，目前官方还不支持此功能，下面我们会通过源码逐步分析加载流程及如何通过修改源码补全文件缓存功能。

源码分析

下面将通过流程图结合UML类图分析图片加载流程：

这个UML类图看起来稍微有点儿复杂，但仔细看会发现已将图片数据加载流程分成几大模块，下面将按照模块进行逐步分析，下面将以网络图片加载方式为例讲解核心类和核心方法功能。

核心类及方法介绍

启动缓存相关类

PaintingBinding：图片缓存类和着色器预加载，该类是基于框架的应用程序启动时绑定到Flutter引擎的胶水类，在启动入口main.dart的runApp方法中创建WidgetsFlutterBinding类时被初始化的，通过覆盖父类的initInstances()方法初始化内部的着色器预加载（Skia第一次在GPU上绘制需要编译相应的着色器，这个过程大概20ms～200ms）及图片缓存等，图片缓存以单例的方式（PaintingBinding.instance.imageCache）对外提供方法使用，也就是说这个图片缓存在APP中是全局的，并在这个类中还提供了图像解码（instantiateImageCodec）、缓存清除（evict）等功能。

ImageCache：图片缓存类，默认提供缓存最大个数限制1000个对象和最大容量限制100MB，由于图片加载过程是一个异步操作，所以缓存的图片分为三种状态：已使用、已加载、未使用，分别对应三个图片缓存列表，当图片列表超限时会将图片缓存列表中最近最少使用图片进行删除，缓存列表分别是：活跃中图片缓存列表（_cache）、已加载图片缓存列表(_pendingImages)、未活跃图片缓存列表(_liveImages)，并对外提供以下方法：获取缓存（putIfAbsent）、清空缓存（clear、clearLiveImages）、驱逐单个图片（evict）、最大缓存个数限制（maximumSize）、最大缓存大小限制（maximumSizeBytes）等方法。

从源码中我们可以看到缓存列表是Map类型，Flutter中的Map创建的对象是LinkedHashMap是有序的，按键值插入顺序迭代，Flutter使用LinkedHashMap存储图片数据并实现类似LRU算法的缓存，当缓存列表中的图片被使用后会将图片数据重新插入到缓存列表的末尾，这样最近最少使用的图片始终会被放在列表的头部。

当缓存列表增加图片数据后，会通过最大缓存个数和最大缓存大小两个纬度进行检查缓存列表是否超限，若存在超限情况则通过Map的keys.first方法获取缓存列表头部最近最少使用的图片对象进行删除，直到满足缓存限制。

启动缓存小结：

Flutter启动后在PaintingBinding中创建ImageCache缓存，图片缓存是全局的并以单例方式对外提供使用方法，缓存默认最大个数限制1000个对象、最大容量限制100MB，缓存中的Map列表通过key/value方式存储图片信息，并通过keys.first方法实现的类似LRU算法管理图片缓存列表，对外提供putIfAbsent()方法获取已缓存图像，若缓存中不存在则通过回调图片加载类中的load()方法加载图片数据，另外图片缓存中还提供clear()和evict()方法用来删除缓存。

图片数据加载相关类

ImageProvider：图片数据提供抽象类，该类定义了图像数据解析方法（resolve）、唯一key生成方法（obtainKey）、数据加载方法（load），obtainKey 和load方法均由子类实现，obtainKey方法生成的对象用于内存缓存的key值使用，load方法将按照不同数据源加载图像数据，常用的Provider子类有：NetworkImage、AssetImage、FileImage、MemoryImage，我们可以看到resolve方法返回的是图片加载对象类（ImageStream），load方法返回的是ImageStreamCompleter类用来管理图像加载状态及图像数据（ImageInfo）。

ImageStreamCompleter：是一个抽象类，用于管理加载图像对象（ImageInfo）加载过程的一些接口，Image控件中正是通过它来监听图片加载状态的。

ImageStream：图像的加载对象，可监听图像数据加载状态，由ImageStreamCompleter返回一个ImageInfo对象用于图像显示

NetworkImage：网络图片加载类，ImageProvider的实现类，通过URL加载网络图像，覆盖load()方法返回ImageStreamCompleter的实现类MultiFrameImageStreamCompleter，构建该类需要一个codec参数类型是Future<ui.Codec>，通过调用_loadAsync()方法下载网络图片数据获得字节流后通过调用PaintingBinding.instance.instantiateImageCodec方法对数据进行解码后获得Future<ui.Codec>对象，obtainKey方法我们发现返回的是SynchronousFuture<NetworkImage>(this)对象，正是NetworkImage 自己本身，我们通过该类的==方法可以看到判断两个NetworkImage类是否相等通过runtimeType 、url 、scale 这三个参数来判断，所以图片缓存中的key相等判断取决于图片的url、scale、runtimeType参数。

MultiFrameImageStreamCompleter：是ImageStreamCompleter的子类是Flutter SDK的预置类，构建该类需要一个codec参数类型是Future<ui.Codec>，Codec 是处理图像编解码器的句柄也是Flutter Engine API的包装类，可通过其内部的frameCount变量获取图像帧数，分别处理单帧和多帧（动态图）图像，内部的getNextFrame()方法获取每帧的图像数据并创建Image控件中渲染需要的ImageInfo数据，调用onImage方法将ImageInfo返回给Image控件。

图像数据加载小结：

上面以网络图像加载流程分析，首先通过ImageProvider的resolve()方法创建ImageStream对象，obtainKey()方法创建图像缓存列表中的唯一key（取决于图像url和scale），通过load()方法加载图像数据并返回MultiFrameImageStreamCompleter对象，并将其设置给ImageStream中的setCompleter()方法添加监听图像加载完成状态，图像数据通过Codec 处理帧数分别处理最终创建ImageInfo对象通过ImageStreamListener的onImage方法返回给Image控件。

图片渲染相关类

_ImageState：是Image控件创建的State类，通过调用ImageProvider的resolve()方法解析图片数据，resolve()方法返回的ImageStream对象，通过addListener()增加图片解析状态监听，通过ImageStreamListener的onImage回调中获取图片数据（ImageInfo）加载完成状态，onChunk回调监听数据加载进度，onError监听图片加载错误状态，最终通过调用setState进行数据更新绘制。

细心的同学会发现ImageProvider的实例对象（widget.image）被ScrollAwareImageProvider包装了一下又重新创建了一个provider，在ScrollAwareImageProvider内部主要是重写了其中的resolveStreamForKey()方法，Flutter SDK 1.17版本中对图片解析增加了快速滚动优化，当判断当前屏幕处在快速滚动状态时，则将图片解析过程延迟下一帧帧尾进行。

RawImage：RenderObjectWidget的子类，重写createRenderObject方法创建RenderObject子类。

RenderImage：渲染树中RenderObject的实现类，Flutter的三棵树Widget、Element、RenderObject ，而RenderObject这是负责绘制渲染的，RenderImage重写performLayout()方法度量渲染尺寸并布局，重写paint()方法获取画布Canvas，Canvas是记录图片操作的接口类，通过参数处理图片镜像、裁剪、平铺等逻辑后调用的drawImageNine()和drawImageRect()方法将图片合成到画布上最终调用Skia引擎API进行绘制。

图片渲染小结：

Image控件中通过调用ImageProvider的resolve()方法获取图片数据ImageInfo对象，通过setState方法将数据更新给图片渲染控件（RenderImage），RenderImage中重写paint()方法根据传入参数对图片数据处理后绘制到Canvas画布上并调用Skia引擎API进行绘制。

总结

以上是 Image 图片加载原理及源码分析，那么我们在翻阅了Image源码后能做些什么呢？使用过程中有哪些可以优化的部分呢？让我们继续往下看。

图片缓存池大小限制优化

Flutter本身提供了定制化Cache的能力，所以优化ImageCache的第一步就是要根据机型的实际物理内存去做缓存大小的适配，通过PaintingBinding.instance.imageCache调用的maximumSize和maximumSizeBytes动态设置合理的图片缓存大小限制避免因图片过多导致OOM。

未显示图像内存优化

可结合StatefulWidget控件生命周期中的deactive()、dispose()等方法，在页面控件中的图片未显示在屏幕上或控件已销毁时调用图片缓存中的evict()方法进行资源释放。

图片预缓存处理

Image控件中提供了precacheImage()方法可以将需要显示的图片预先加载到ImageCache的缓存列表中，缓存列表中通过key值区分相同图片，在页面打开后直接从内存缓存获取，可快速显示图片。

图片文件缓存

通过查看网络图片加载类NetworkImage源码可以发现，图片数据下载和解码过程都是通过_loadAsync()方法完成的，所以我们可以通过改造这个方法中图片文件下载、读取、保存过程去增加图片文件本地存储、获取原生图片库缓存、图片下载DNS处理等功能。

自定义占位图、错误图效果

Image控件中的frameBuilder和errorBuilder参数分别为我们提供了占位图和错误图的自定义方式，也可使用FadeInImage控件提供的占位图（placeholder）、错误图imageErrorBuilder等参数，FadeInImage内部实现也是Image控件，感兴趣的同学可以查看其源码实现。

大图下载进度自定义显示

显示效果：https://flutter.github.io/assets-for-api-docs/assets/widgets/loading_progress_image.mp4

图片可拉伸区域设置（.9图片）

RenderImage的paint方法中我们发现在调用Canvas API绘制前会判断centerSlice参数分别调用drawImageNine()和drawImageRect()方法，Image正式通过centerSlice参数配置图片的可拉伸区域，参考代码：centerSlice: Rect.fromLTWH(20, 20, 1, 1)，L：横向可拉伸区域左边起始点位置，T：纵向可拉伸区域上边起始点位置，W：横向可拉伸区域宽度，H：纵向可拉伸区域宽度。

未来规划

本文介绍了京东APP中Flutter探索遇到的问题以及图片的加载原理和使用过程中的一些技巧，随着Flutter SDK版本迭代更新，我们将继续对图片加载框架进行优化，原生开发中的多个优秀图片框架已经经历了大量用户的考验这也一直是我们渴望在Flutter上复用的能力，所以我们也在积极探索原生和Flutter中图片内存共享方案，我们希望这个增强能力是非侵入式的，我们也在尝试外接纹理等方案，这块技术细节进展将在后续文章中继续和大家一起探讨。

参考资料

1、http://storage.360buyimg.com/pub-image/Image-source.jpg

2、https://book.flutterchina.club/chapter14/image_and_cache.html

3、https://api.flutter-io.cn/flutter/painting/ImageCache-class.html

作者：京东零售 徐宏伟

来源：京东云开发者社区


在线咨询
上一篇：探秘网页性能提升利器之CSS硬件加速
下一篇：如何在苹果电脑上创建一个html格式文件，并在浏览器正确打开

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 噶尔县 泸县 吴兴区 梁子湖区 金东区 武功县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服