Promise.all 加载图片

最新推荐文章于 2024-07-20 23:54:17 发布
最新推荐文章于 2024-07-20 23:54:17 发布
阅读量153 收藏
点赞数
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73474319/article/details/128216057
版权

<!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>Document</title>

</head>

<body>

   

</body>

</html>

<script>

    function loadimg(url){

        return new Promise(function(resolve,reject){

            let img=new Image();

            img.src=url;

            img.οnlοad=function(){

                resolve(img);

            }

            img.οnerrοr=function(){

                reject('error')

            }

        })

    }

    let img_url='https://ts1.cn.mm.bing.net/th?id=OIP-C.eSS4x40qTlliW4ftI7-RNAHaNK&w=187&h=333&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2';

    let img_url2='https://ts2.cn.mm.bing.net/th?id=OIP-C.2dF0ubhnNn82lXodJUF54gHaNK&w=187&h=333&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2';

    let img_url3='https://ts3.cn.mm.bing.net/th?id=OIP-C.kw9Pt3w3B8oaS_uR09csKQHaNK&w=187&h=333&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2';

    // loadimg(img_url).then((img)=>{

    //     document.documentElement.appendChild(img);

    // }),(error)=>{

    //     throw error;

    // },    

    // loadimg(img_url2).then((img)=>{

    //     document.documentElement.appendChild(img);

    // }),(error)=>{

    //     throw error;

    // },

    // loadimg(img_url3).then((img)=>{

    //     document.documentElement.appendChild(img);

    // }),(error)=>{

    //     throw error;

    // };

    // Promise.all([

    //     loadimg(img_url),

    //     loadimg(img_url2),

    //     loadimg(img_url3),

    // ]).then((item)=>{

    //     for(let i of item){

    //         document.documentElement.appendChild(i);

    //     }

    // }).catch((error)=>{

    //     console.log('加载失败');

    // })

    Promise.all([

        loadimg(img_url),

        loadimg(img_url2),

        loadimg(img_url3),

    ]).then((item)=>{

        for(let i of item){

            document.documentElement.appendChild(i);

        }

    }).catch(()=>{

        console.log('加载失败');

    })

</script>

李文峰大仙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图片预加载（Promise）
m0_54072287的博客
01-23 469
什么是图片加载？ 图片预加载就是在网页全部加载之前，提前加载图片，减少用户的等待时间。 1、把加载的图片复制全部放在一个数组中，设置变量num就是第几张图片，加载完第一张图片后，重新设置图片地址，触发执行继续加载，直到全部加载完成。 <script> var imgList=[]; var num=1; loadImage(); function loadImage(){ var img=new Image(); img.addEventListener("load",loadH
使用promise.all来实现所有图片都加载完成后才一起出现的效果
qq_34471916的博客
02-10 1441
const loadImg = (src) => { return new Promise((resolve, reject) => { const img = new Image() img.src = src img.onload = ()=>{ resolve(img) ...
记录--聊聊图片预加载
林恒的博客
12-25 439
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 聊聊图片预加载 关于图片的加载，不同的需求有不同的实现，比如图片过多时候的懒加载，为了保证效果的预加载。 如何进行图片的预加载 前端实现图片的预加载，其实是利用了浏览器的缓存，我们通过 a 标签来提前加载图片，如下： const img = new Image() img.src = '链接' img.onlo...
Promise.all加载多张图片
Andy
03-15 684
Promise.all加载多张图片
利用Promise判断请求图片超时，Promise.race
林啾啾的博客
02-06 264
Promise的all方法和race方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。
Promise实现图片预加载
M_allstar的博客
06-28 982
const [isLoadSuccess, setIsLoadSuccess] = useState(true) // 图片预加载, 传入地址参数 const loadImage = imageSrc => { // resolve 标志成功时执行的语句 // reject 标志失败时执行的语句 return new Promise((resolve, reject) => { const image = new Image() image.src = imageSrc // 如
Promise.all() 使用方法
ZXH0122的博客
06-18 1146
Promise.all() 方法是 JavaScript 中的一个 Promise 方法，它用于同时处理多个 Promise 对象，并返回一个新的 Promise 对象。
理解promise.all和promise.allSettled
baidu_41601048的博客
01-21 2806
在工作中经常会遇到这样一个场景，在一个页面中可能会加载多个异步请求。为了性能。一般会通过Promise.all[async func1,async func2 ..]，但是promise.all会隐藏一个风险。当其中一个异步请求挂掉时，它会把挂掉的结果作为返回值。这显然不是我们想要的。我们需要哪怕其中一个或者多个挂掉了，你依然可以把整个结果数组返回给我。同时其他请求不受到影响。 接下来我们尝试手动实现一个这样的方法,我们暂且加它allSettled 在实现之前。我们需要了解几个要点： 1 allSet
深入理解Promise.all
12-09
【深入理解Promise.all】 Promise.all 是 JavaScript 中处理异步操作的一种关键方法，它接收一个 Promise 对象的数组作为参数，并在所有 Promise 对象都解决（resolve）后返回一个新的 Promise 实例。这个返回的 ...
js代码-promise.all的实现
07-16
promiseAll(promises).then(values => console.log(values)).catch(error => console.error(error)); ``` 在这个实现中，我们创建了一个新的Promise，然后遍历传入的Promise数组。对于每个Promise，我们添加一个`....
js代码-promise.all
07-16
比如在Web开发中，我们需要加载多个资源（如图片、JSON数据等）时，可以并行发起请求，利用Promise.all来等待所有请求完成： ```javascript let url1 = 'http://example.com/data1.json'; let url2 = '...
js代码-Promise.all
07-16
例如，从多个不同的URL加载图片，可以并发请求，而不是逐一等待。 2. **数据聚合**：当需要等待所有异步操作完成后，再对结果进行统一处理时，Promise.all非常适合。例如，获取多个数据库记录并合并成一个完整的...
js代码-promise.all实现
07-16
在JavaScript中，Promise.all是一个非常重要的特性，它用于处理多个Promise对象并行执行的情况。当所有Promise对象都成功 resolve（解决）时，Promise.all返回的新Promise才会被resolve；只要有一个Promise reject...
Next.js静态导出与动态路由优化
最新发布
天涯学馆
07-20 802
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1131
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 645
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
vue执行npm install问题idealTree:yudao-ui-admin-vben: sill idealTree buildDeps
yuan5025的博客
07-17 1099
目前这个问题只在芋道源码yudao-ui-admin-vben碰到了，其他vue项目没用遇到过。
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 431
【代码】博客前端项目学习day03——框架页。
promise.all 动态加载cdn
01-27
Promise.all(cdnUrls.map(url => loadScript(url))) .then(() => { console.log('CDN资源加载完成'); // 在这里可以使用加载的CDN资源 // 例如，可以使用Vue和Axios // Vue.use(...) // axios.get(...) }) ....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值