使用Promise实现图片的预加载

快来打我* 2022-03-14 12:48 360阅读 0赞

如下是项目的整体结构：  
![在这里插入图片描述][20190304164000527.]

实现代码如下：

const preLoadImg = function (path) { 
        return new Promise(function (resolve, reject) { 
            const img = new Image();
            img.onload = resolve;
            img.onerror = reject;
            img.src = path;
        })
    };

测试代码如下：

preLoadImg("../../resources/imgs/1.jpg").then(res => { console.log(res, 1);}).catch(e => { console.log(e, 2);});

需要注意的是，Image对象不能单独在JS环境中使用，需要结合 Html 页面一起使用，不然会出如下错误：

ReferenceError: Image is not defined
        at D:\Workspaces\Webstorm\web\javascript\ES6\src\promise\loadImg.js:3:21
        at new Promise (<anonymous>)
        at preLoadImg (D:\Workspaces\Webstorm\web\javascript\ES6\src\promise\loadImg.js:2:12)
        at Object.<anonymous> (D:\Workspaces\Webstorm\web\javascript\ES6\src\promise\loadImg.js:10:1)
        at Module._compile (module.js:652:30)
        at Object.Module._extensions..js (module.js:663:10)
        at Module.load (module.js:565:32)
        at tryModuleLoad (module.js:505:12)
        at Function.Module._load (module.js:497:3)
        at Function.Module.runMain (module.js:693:10)
    
    Process finished with exit code 0

Html中的简单实例如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>PreLoad Image</title>
        <script src="loadImg.js"></script>
    </head>
    <body>
        hello!!
        <img src="../../resources/imgs/1.jpg">
    </body>
    </html>

[20190304164000527.]: /images/20220313/c8e440eebc5c41c197eb59214b1d1482.png

发表评论取消回复

表情：

评论列表（有 0 条评论，360人围观）

还没有评论，来说两句吧...

相关阅读

相关使用Promise 动态加载图片

使用Promise 动态加载图片： <script> function loadIMage(src) { // 创建一个

妖狐艹你老母/ 2023年07月24日 14:39/ 0 赞/ 46 阅读

相关预加载图片

预加载图片 1. 在$(function())中，该封装函数是保证页面完成后进行执行js，该函数在ready时执行，在load后执行 2. 需要在$(function(

你的名字/ 2023年01月17日 12:58/ 0 赞/ 271 阅读

相关 js实现图片预加载

实现图片的懒加载，实际上是创建一个图片对象，缓存在浏览器中，用于处理图片大小过大，加载过程不友好，影响用户体验在图片的加载过程中，用这种loading代替，加载完毕后，通过

红太狼/ 2022年12月19日 08:54/ 0 赞/ 194 阅读

相关 JavaScript实现图片预加载

网站开发时经常需要在某个页面实现对大量图片的浏览，如果考虑流量的话，大可以像pconline一样每个页面只显示一张图片，让用户每看一张图片就需要重新下载一下整个

曾经终败给现在/ 2022年06月14日 10:12/ 0 赞/ 309 阅读

相关 javascript实现图片懒加载和预加载

所谓懒加载就是通过某些特定的条件，然后再给图片的src赋值，常见的懒加载方式有点击加载和滚动加载。如果是点击加载，那么一般是通过点击事件。例如： ![这里写图片描述]

客官°小女子只卖身不卖艺/ 2022年05月28日 04:51/ 0 赞/ 330 阅读

相关图片预加载

一、未使用预加载技术前 ![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] <!DOCTYPE html>

素颜马尾好姑娘i/ 2022年03月27日 13:48/ 0 赞/ 456 阅读

相关使用Promise实现图片的预加载

如下是项目的整体结构： ![在这里插入图片描述][20190304164000527.] 实现代码如下： const preLoadImg = function

快来打我*/ 2022年03月14日 12:48/ 0 赞/ 361 阅读

相关图片预加载

背景利用图片的预加载技术获得更好的用户体验什么是有序预加载和无序预加载 jQuery插件的写法图片预加载，预知用户将要发生的行为，提前加载用户所需的图片网

客官°小女子只卖身不卖艺/ 2021年09月29日 15:30/ 0 赞/ 597 阅读

相关图片预加载和懒加载的实现方法

图片预加载即提前加载图片，可保证图片快速、无缝地发布，用户需要查看时可直接从本地缓存中渲染，适用于图片占据很大比例的网站。方法1,在CSS background中加载：会增

以你之姓@/ 2021年09月02日 05:57/ 0 赞/ 572 阅读

相关 js实现图片预加载

js实现图片预加载什么是预加载：当页面打开图片提前加载，并且缓存在用户本地，需要用到时直接进行渲染；在浏览图片较多的网页（百度图库，淘宝京东等），可以有更好的用户体验；

小灰灰/ 2020年06月03日 12:33/ 0 赞/ 786 阅读