[JS]保證Image loaded 且 rendered完的方法

Posted on by Mingray



How to detect when the image has finished rendering? on IOS

  1. 在Chrome PC上 Android 方法
function loaded() {
  console.log('loaded and rendered')
}

<img onload={loaded()} />

2. 100% 保證的方法 (Safari也適用)

function rendered() {
  console.log('rendered')
}

function startRender() {
    requestAnimationFrame(rendered);
}

function loaded()  {
    console.log('loaded')
    requestAnimationFrame(startRender);
}

<img onload={loaded()} />

基本上要確保100% 載入且渲染完成，要等2個frame，就一定會渲染完成

發表迴響