zoukankan      html  css  js  c++  java
  • async/await实现图片的串行、并行加载

    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>es6</title>
    <style>
    img {
    100%;
    }
    </style>
    </head>

    <body>
    <script>
    // Promise加载图片
    var loadImg = (url) => {
    return new Promise((resolve, reject) => {
    // 创建图片
    var img = new Image()
    // 加载成功
    img.onload = () => {
    resolve(img)
    }
    // 图片加载
    img.onerror = () => {
    reject(new Error('图片加载失败'))
    }
    img.src = url
    })
    }
    var imgs = ['http://img4.duitang.com/uploads/item/201411/09/20141109142633_ncKBY.thumb.700_0.jpeg',
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1538658203&di=2405d72f77c748c885064770074fed77&imgtype=jpg&er=1&src=http%3A%2F%2Fp1.gexing.com%2Ftouxiang%2F20120801%2F0038%2F50180a1634e49_200x200_3.jpg%3Frecache%3D20131108',
    'http://img3.imgtn.bdimg.com/it/u=2423321859,2979330058&fm=27&gp=0.jpg'
    ]
    // 并行加载
    var loadImgAsync = (imgs)=>{
    imgs.forEach(async (item)=>{
    let img = await loadImg(item)
    document.body.appendChild(img)
    })
    }
    loadImgAsync(imgs)

    // 串行加载
    var ImgAsync = async (imgs) => {
    for (var i = 0; i < imgs.length; i++) {
    let img = await loadImg(imgs[i])
    document.body.appendChild(img)
    }
    }
    ImgAsync(imgs)
    </script>
    </body>

    </html>
  • 相关阅读:
    #背包#nssl 1488 上升子序列
    #环#nssl 1487 图
    #分治#JZOJ 4211 送你一颗圣诞树
    #概率,dp#JZOJ 4212 我想大声告诉你
    #并查集#JZOJ 4223 旅游
    #dp#nssl 1478 题
    #对顶堆#nssl 1477 赛
    #线段树,离散#nssl 1476 联
    #折半搜索,状压dp#nssl 1471 Y
    #并查集,线性筛#nssl 1470 X
  • 原文地址:https://www.cnblogs.com/2oex/p/9718596.html
Copyright © 2011-2022 走看看