<picture />元素onLoad不會持續觸發

Question

關於圖像onLoad問題由於某種原因沒有觸發，因此我在圖片和圖像上都有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>

我在這里做錯了什么？ 檢測像素加載的圖像的正確方法是什么？

是否應該在img或picture同時onLoad ？

非常感謝

Answer 1

對於圖像標簽，加載圖像完成后將觸發onload。 如果您希望圖像下載進度，請使用

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

使用此功能，您可以計算並顯示圖像加載的進度。