美文网首页javaScript
javascript -- Promise实现XML图片加载

javascript -- Promise实现XML图片加载

作者: 反者道之动001 | 来源:发表于2017-07-22 14:15 被阅读6次
 function imgLoad(url) {
    // 用两个参数, resolve和reject
    return new Promise(function(resolve, reject) {
      var request = new XMLHttpRequest();
      request.open('GET', url)
      request.responseType = 'blob'

      // onload
      request.onload = function() {
        if (request.status === 200) {
           // 成功响应
          resolve(request.response);
        } else {
          reject(Error(request.statusText));
        }
      }

      // onerror
      request.onerror = function() {
          reject(Error('加载失败'))
      };
      // 发送请求
      request.send()
    })
  }

  var body = document.querySelector('body');
  var myImage = new Image();
  imgLoad('blob:https://mdn.github.io/f84ebba6-8b10-4165-8704-47923e6129e1')
    .then(function(response) {
        var imageURL = window.URL.createObjectURL(response)
        myImage.src = imageURL
        body.appendChild(myImage)
    },
    function(Error) {
        console.log(Error)
    })

参考:

https://mdn.github.io/js-examples/promises-test/

相关文章

  • javascript -- Promise实现XML图片加载

    参考: https://mdn.github.io/js-examples/promises-test/

  • 图片懒加载

    前端实现图片懒加载(lazyload)的两种方式 原生JS实现最简单的图片懒加载 30行Javascript代码实...

  • js判断多个请求加载完毕

    通过js判断多个请求是否加载完毕 判断下面3张图片是否全部加载完毕 通过比较传统的方式实现 通过Promise方式实现

  • Promise相关概念

    Promise 检测图片 检测图片是否加载成功,成功就正常显示,失败就展示默认图片 休眠的实现方法 基本用法 有一...

  • 07- webpack 加载图片

    一、JavaScript 加载图片 JavaScript 中加载图片,两种使用方法 加载背景图片 backgro...

  • ES6 Promise对象应用

    1. 加载图片 我们可以将加载图片写成一个Promise,一旦加载完成,Promise的状态就发生变化。 上面pe...

  • Javascript实现图片的预加载的完整实现

    Javascript实现图片的预加载的完整实现 2012-11-01 11:51 by Zhuang miao,2...

  • ajax(实现加载更多)

    题目1:ajax 是什么?有什么作用? ajax是异步的javascript和xml 1优点 实现网页的异步加载,...

  • AJAX

    同步和异步 异步的javascript和xml就是AJAX,不用全部重新加载,可以实现异步请求,局部刷新的功能。 ...

  • JavaScript实现图片延迟加载

    在日常的抓取工作当中,经常看到网站为了减轻网页加载所需资源对图片等资源进行延迟加载。那什么样的页面需要用到延迟加载...

网友评论

    本文标题:javascript -- Promise实现XML图片加载

    本文链接:https://www.haomeiwen.com/subject/udrukxtx.html