手写promise加载图片

最新推荐文章于 2022-03-06 23:43:32 发布
最新推荐文章于 2022-03-06 23:43:32 发布
阅读量139 收藏
点赞数 1
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47901007/article/details/120212325
版权

Promise 图片加载 异步 JavaScript DOM操作
关键词由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手写promise加载图片</title>
</head>
<body>
    <div id="box"></div>
    <script>
        function loadImg(url){
            return new Promise( (resolve, reject) => {
                    const imgEl = document.createElement('img');
                    const boxEl = document.getElementById('box');
                    boxEl.appendChild(imgEl);
                    imgEl.onload = () => {
                        resolve(imgEl);
                    }
                    imgEl.onerror = () => {
                        const err = new Error('图片加载失败' + url);
                        reject(err);
                    }
                    imgEl.src = url;
                }
            )
        }
        var url1 = 'https://userblink.csdnimg.cn/20210623/m0_47901007/pic/5299b0b9a9611f18eed78f0147a04b87-0.jpg?x-oss-process=image/interlace,1/format,jpg/resize,w_375';
        var url2 = 'https://userblink.csdnimg.cn/20210623/m0_47901007/pic/0eae87fd6b88cd05ce88ac3a6a90ed8e-4.jpg?x-oss-process=image/interlace,1/format,jpg/resize,w_375';
        var url3 = 'https://userblink.csdnimg.cn/20210623/m0_47901007/pic/a95b4b4b4c85d3f31407aedf2325ff8a-6.jpg?x-oss-process=image/interlace,1/format,jpg/resize,w_375';
        
        loadImg(url1).then(img1 => {
            console.log(img1.width);
            return loadImg(url2);  //返回Promise实例
        }).then(img2 => {
            console.log(img2.width);
            return loadImg(url3);
        }).then(img3 => {
            console.log(img3.width);
        }).catch( err => {
            console.log(err);
        })
    </script>
</body>
</html>

在这里插入图片描述

爱划水de鲸鱼哥～
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【JavaScript】深入理解Promise：从基础概念到进阶用法、手写promise
Allen-
07-10 3116
Promise是JavaScript中的一种对象，用于表示一个在未来某个时间点才会完成（或失败）的异步操作及其结果。它提供了一种处理异步操作的统一接口，使代码更加简洁和易于理解。与传统的回调函数相比，Promise能够更好地处理异步操作的结果和错误。Promise作为JavaScript中处理异步操作的一种重要机制，极大地简化了代码编写和异步流程控制。
Promise学习-手写一个promise
水蓝针织
10-09 1625
学习了Promise的A+规范，以及手写一个Promise后，我对Promise学到的结果。 平常也有用到过promise来处理异步，先回顾下promise的用法 const myPromise = new Promise((resolve,reject) => { //写一些异步操作，比如ajax请求 if(window.onError){ reject('页面加载失败'); } setTimeout(() => { resolve('异步返回结果'); }, 1000)
手写Promise加载一张图片
Yes博客
03-27 136
手写Promise加载一张图片 function loadImg(src) { const p = new Promise( (resolve, reject) => { const img = document.createElement('img') img.onload = () => { resolve(img) } img.oner
手写一个简易的用 Promise 加载一张图片
lovexiaoqiu的博客
06-17 332
function loadImg(src){ return new Promise((resove,reject)=>{ const img = document.createElement('img') img.onload = ()=>{ resove(img) } img.onerror = ()=>{ let err = new Error('图片加载失败') .
手写 Promise 加载一张图片
zpfnext的博客
09-29 97
function loadImg(src) { const p = new Promise( (resolve, reject) => { const img = document.createElement('img') img.onload = () => { resolve(img) } img.onerror = () => {
js代码-手写promise
07-14
本项目中，我们将深入探讨如何手写Promise，理解其内部机制。 Promise有三种状态：pending（进行中）、fulfilled（已完成）和rejected（已失败）。状态一旦改变，就不会再变，确保了执行顺序。Promise构造函数接收...
JS手写一个自定义Promise操作示例
11-21
在本实例中，我们将学习如何手写一个自定义的Promise，即`MyPromise`。 首先，我们创建了一个名为`MyPromise`的类，它接受一个`executor`函数作为参数。`executor`函数会在Promise实例创建后立即执行，并且它有两个...
手写一个promise用法_手写一个 Promise
weixin_39652646的博客
12-22 200
1 js 的基本数据类型?2 JavaScript 有几种类型的值？3 什么是堆？什么是栈？它们之间有什么区别和联系？4 内部属性 [Class] 是什么？5 介绍 js 有哪些内置对象？6 undefined 与 undeclared 的区别？7 null 和 undefined 的区别？8 如何获取安全的 undefined 值？9 说几条写 JavaScript 的基本规范？10 JavaS...
promise手写加载图片
Formattor的博客
04-24 101
function loadImg(src){ const p=new Promise((resolve,reject)=>{ const img=document.createElement('img') img.onload=function() { resolve(img) } img.onerror=function(){ const err=new Error(`图片加载失败,url为：${src}`) reject(er
【JS面试题】手写Promise加载图片
Milk~每天分享一点点，技术进步一点点
07-28 766
手写Promise加载一张图片 初始化: 1.html <body> <script src="./promise.js"></script> </body> promise-demo.js //手写promise加载图片 function loadImg(src) { const p = new Promise( (resolve, reject) => { const img = docume
手写Promise异步加载图片
灯火十里
07-05 211
手写Promise异步加载图片 定义一个函数，在其中创建一个Promise，并且将这个Promise返回，在这个图片的onload和onerror上分别绑定获取图片成功和失败的逻辑，分别调用resolve和reject。最后别忘记修改图片的src。 function loadImg(url) { const p = new Promise((resolve, reject) => { const img = document.createElement("img"); img.on
Promise对象加载图片
hahahahahahahaha__1的博客
04-17 990
var preloadImage = function (path) {  return new Promise(function (resolve, reject) {    var image = new Image();    image.onload  = resolve;    image.onerror = reject;    image.src = path;  });};prel...
使用Promise加载图片
Billow_lamb的博客
05-13 1101
使用Promise加载图片 let url = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.layui.com%2Favatar%2F54267528.jpg%3Ft%3D1584703923649&refer=http%3A%2F%2Fcdn.layui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623
Promise异步加载图片
weixin_51042892的博客
03-06 330
function loadImage(src){ return new Promise((resolve,reject)=>{ const image=new Image(); image.src=src; image.width=200; image.onload=()=>{ ...
通过promise加载图片
webblock的博客
08-08 682
准备工作： 新建一个文件夹 文件夹里有图片文件夹，里面有一张图片 <script> function loadImg(src){ return new Promise((resolve,reject)=>{ var img = document.createElement('img') img.onload=()=>{ resolve(img); } img.onerror=(err)=>{ reject(err) } img.src = sr
手写promise封装图片加载
weixin_52012977的博客
01-11 223
第二张是一个 第三张是2张 return 返回普通对象 下面的 .then正常接收。 如果返回一个promise的实例对象下面的.then就会执行 loadImg加载完后的图片对象
手写用 promise 加载一张图片
curacaolb的博客
03-01 346
只有一张图片时 function loadImg(src) { // 1.创建一个p存储一个Promise类的实例 const p = new Promise( // 2.传入一个函数，内部有两个形参分别为resolve和reject，这两个形参同样也是函数 (resolve, reject) => { //3. 先定义一张图片,创建一个element const img = document.create
手写promise面试
最新发布
01-08
手写Promise面试是一个通过手写代码来展示对Promise的理解和掌握程度的面试环节。在面试中，面试官往往会要求面试者用纸笔手写一个简单的Promise实现，或者是解答一些与Promise相关的问题。 首先，面试者需要熟悉...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱划水de鲸鱼哥～

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值