Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@huangjs888/load-image

huangjs88832MIT1.2.2TypeScript support: included

Load image with progress

huangjs, huangjs888, loadImage, load-image, image-load, imageLoad, image

readme

loadImage

图片加载封装,带有进度的

安装使用


npm install @huangjs888/load-image --save

使用方法


import loadImage from '@huangjs888/load-image';

// 第二个参数为progress函数,传入,则使用ajax获取图片资源(ajax方式不适合跨域获取图片),不传,则直接Image对象
loadImage('http://xx/xxx/xx.jpg', (v) => {
  document.body.innerHTML = `<span>加载进度:${v * 100}%</span>`;
})
  .then((image) => {
    image.width = image.naturalWidth;
    image.height = image.naturalHeight;
    document.body.appendChild(image);
  })
  .catch(() => {
    document.body.innerHTML = '<span>加载图片失败!</span>';
  });