Question

图片onLoad上的问题由于某种原因没有触发，所以我对图片和图片都进行了加载，但有时它们都会触发，但有时它们都不会触发？

  return <picture onLoad={() => console.log('loaded')} className={className}>
    {Array.isArray(sources) && sources.map((d, i) => <source key={`${i}${d.srcSet}`} srcSet={d.srcSet} media={d.media} />)}
    <img src={src} onLoad={() => console.log('img loaded')} alt={alt} />
  </picture>

我在这里做错了什么？什么是检测图像元素上载图像的正确方法？

onLoad或img也应该picture？

非常感谢

Answer 1

对于图像标记onload将在加载图像完成时触发。如果您想要图像下载的进度，请使用

onprogress={(e) => { 
   console.log(e); 
   console.log((e.loaded / e.total) * 100);
}}

使用此功能可以计算并显示图像加载的进度。

<picture>元素onLoad不会不断触发

1 个答案: