JavaScript 中的图像预加载和顺序显示

Question

我想要的是：

预加载图像（最多 40-50 张），并在完成后进行回调（例如警报）（我认为这部分已经很好）
要点：一张一张的显示图片div，尽可能准确记录显示时间（另外，任何一张图片都可能显示多次）
在另一个 div 中显示相同的图像（如果我有第 2 点，这应该相当容易）

有关更多上下文：这是一个响应时间实验，在线参与者可以看到图片并对其做出关键响应（并测量他们的响应时间）。（另外，显示之间至少有200-500ms的间隔，所以每次显示之前的准备工作稍微花点时间也没问题。）

我已经有了一个完整的工作代码，这是我从以前的各种答案中整理出来的：有人可以验证我的代码是否有意义，并且我无法做任何其他事情来提高它的效率吗？

让我感到困惑的一件事是 "appendChild" 在浏览器中的确切作用。（换句话说：我知道该元素将被添加到页面中，但我不知道这对浏览器意味着什么。）目前我在实际显示之前只是稍微附加了图像（100 毫秒），然后我通过将不透明度设置为 0 到 1 (which is presumed to be the most optimal method for precise timing) 来实现。然后我在显示下一张图片之前删除图片（清空 div）。但我想知道这样做是否有任何意义。例如，如果我附加所有已经在 "preloading phase" 中的图像，并在不需要时将它们的不透明度设置为 0 会怎样？这对性能有何影响？或者，如果（虽然我宁愿不这样做）我在不透明度变化之前附加它们怎么办？ "appending" 是否需要任何时间，或者它能以任何方式影响即将到来的不透明度变化的时间吗？（编辑：现在我有了主要问题的答案，但如果能得到关于这一点的解释，那还是很好的。）

明显的问题是我无法真正准确地测量显示时间（没有外部硬件），所以我不得不依靠"seems to make sense"。

无论如何，下面是我的代码。

var preload = ['https://www.gstatic.com/webp/gallery/1.jpg', 'https://www.gstatic.com/webp/gallery3/1.png', 'https://www.gstatic.com/webp/gallery/4.jpg', 'https://www.gstatic.com/webp/gallery3/5.png'];
var promises = [];
var images = {};
// the function below preloads images; its completion is detected by the function at the end of this script
for (var i = 0; i < preload.length; i++) {
  (function(url, promise) {
    var filename = url.split('/').pop().split('#')[0].split('?')[0];
    images[filename] = new Image();
    images[filename].id = filename; // i need an id to later change its opacity
    images[filename].style.opacity = 0;
    images[filename].style.willChange = 'opacity';
    images[filename].style['max-height'] = '15%';
    images[filename].style['max-width'] = '15%';
    images[filename].onload = function() {
      promise.resolve();
    };
    images[filename].src = url;
  })(preload[i], promises[i] = $.Deferred());
}

// the function below does the actual display
function image_display(img_name, current_div) {
  window.warmup_needed = true;
  document.getElementById(current_div).innerHTML = ''; // remove previous images
  document.getElementById(current_div).appendChild(images[img_name]); // append new image (invisible; opacity == 0)
  chromeWorkaroundLoop(); // part of the timing mechanism
  setTimeout(function() {
    document.getElementById(img_name).style.opacity = 1; // HERE i make the image visible
    requestPostAnimationFrame(function() {
      window.stim_start = now(); // HERE i catch the time of display (image painted on screen)
      warmup_needed = false;
    });
  }, 100); // time needed for raF timing "warmup"
}


// below are functions for precise timing; see 
function monkeyPatchRequestPostAnimationFrame() {
  const channel = new MessageChannel();
  const callbacks = [];
  let timestamp = 0;
  let called = false;
  channel.port2.onmessage = e => {
    called = false;
    const toCall = callbacks.slice();
    callbacks.length = 0;
    toCall.forEach(fn => {
      try {
        fn(timestamp);
      } catch (e) {}
    });
  };
  window.requestPostAnimationFrame = function(callback) {
    if (typeof callback !== 'function') {
      throw new TypeError('Argument 1 is not callable');
    }
    callbacks.push(callback);
    if (!called) {
      requestAnimationFrame((time) => {
        timestamp = time;
        channel.port1.postMessage('');
      });
      called = true;
    }
  };
}
if (typeof requestPostAnimationFrame !== 'function') {
  monkeyPatchRequestPostAnimationFrame();
}

function chromeWorkaroundLoop() {
  if (warmup_needed) {
    requestAnimationFrame(chromeWorkaroundLoop);
  }
}



// below i execute some example displays after preloading is complete

$.when.apply($, promises).done(function() {
  console.log("All images ready!");
  // now i can display images
  // e.g.:
  image_display('1.jpg', 'my_div');

  // then, e.g. 1 sec later another one

  setTimeout(function() {
    image_display('5.png', 'my_div');
  }, 1000);

});

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<div id='my_div'></div>

Answer 1

一个问题是官方的，onload只告诉我们网络状态（+元数据解码）。

在能够将其呈现在屏幕上之前，浏览器可能还必须执行一些其他操作，例如将其完全解码为可以移动到 GPU 的位图，以便最终呈现在屏幕上.

这至少可以在 Firefox 中看到，方法是使用同步 drawImage 方法在 canvas 上绘制图像；对于大图像，此 drawImage() 调用即使在您的代码运行之后也可能需要几毫秒，表明他们尚未完全解码它：

var preload = ['https://upload.wikimedia.org/wikipedia/commons/c/cf/Black_hole_-_Messier_87.jpg'];
var promises = [];
var images = {};
// the function below preloads images; its completion is detected by the function at the end of this script
for (var i = 0; i < preload.length; i++) {
  (function(url, promise) {
    var filename = url.split('/').pop().split('#')[0].split('?')[0];
    images[filename] = new Image();
    images[filename].id = filename; // i need an id to later change its opacity
    images[filename].style.opacity = 0;
    images[filename].style.willChange = 'opacity';
    images[filename].style['max-height'] = '15%';
    images[filename].style['max-width'] = '15%';
    images[filename].onload = function() {
      promise.resolve();
    };
    images[filename].onerror = promise.reject;
    images[filename].src = url;
  })(preload[i] + '?r='+Math.random(), promises[i] = $.Deferred());
}

// the function below does the actual display
function image_display(img_name, current_div) {
  window.warmup_needed = true;
  document.getElementById(current_div).innerHTML = ''; // remove previous images
  document.getElementById(current_div).appendChild(images[img_name]); // append new image (invisible; opacity == 0)
  chromeWorkaroundLoop(); // part of the timing mechanism
  setTimeout(function() {
    document.getElementById(img_name).style.opacity = 1;
    const c = document.createElement('canvas');
    c.width = document.getElementById(img_name).width
    c.height = document.getElementById(img_name).height;
    console.time('paint1');    c.getContext("2d").drawImage(document.getElementById(img_name),0,0);
    console.timeEnd('paint1');

    console.time('paint2');    c.getContext("2d").drawImage(document.getElementById(img_name),0,0);
    console.timeEnd('paint2');

    // HERE i make the image visible
    requestPostAnimationFrame(function() {
      window.stim_start = now(); // HERE i catch the time of display (image painted on screen)
      warmup_needed = false;
    });
  }, 100); // time needed for raF timing "warmup"
}


// below are functions for precise timing; see 
function monkeyPatchRequestPostAnimationFrame() {
  const channel = new MessageChannel();
  const callbacks = [];
  let timestamp = 0;
  let called = false;
  channel.port2.onmessage = e => {
    called = false;
    const toCall = callbacks.slice();
    callbacks.length = 0;
    toCall.forEach(fn => {
      try {
        fn(timestamp);
      } catch (e) {}
    });
  };
  window.requestPostAnimationFrame = function(callback) {
    if (typeof callback !== 'function') {
      throw new TypeError('Argument 1 is not callable');
    }
    callbacks.push(callback);
    if (!called) {
      requestAnimationFrame((time) => {
        timestamp = time;
        channel.port1.postMessage('');
      });
      called = true;
    }
  };
}
if (typeof requestPostAnimationFrame !== 'function') {
  monkeyPatchRequestPostAnimationFrame();
}

function chromeWorkaroundLoop() {
  if (warmup_needed) {
    requestAnimationFrame(chromeWorkaroundLoop);
  }
}



// below i execute some example displays after preloading is complete

$.when.apply($, promises).done(function() {
  console.log("All images ready!");
  // now i can display images
  // e.g.:
  image_display('Black_hole_-_Messier_87.jpg', 'my_div');
}).catch(console.error);

<h4>run this snippet in Firefox</h4>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<div id='my_div'></div>

在我的 FF 上我得到

All images ready!
paint1: 665.000ms
paint2: 0.000ms

这意味着在您开始测量我的响应时间后，对于这个巨大的图像，屏幕将空白 650 毫秒。

有一个.decode()方法已经被添加到HTMLImageElement接口，这应该让我们更接近绘画时间，但如果你没看错这个答案的介绍，我们已经找到了更好的方法解决方案：

CanvasRenderingContext2D.drawImage()是同步的。

与其呈现不同的 <img>，不如冒着完全重排页面、触发 CSS t运行位置或其他可能延迟图像显示的风险，保持低水平level，使用单个可见的 DOM 元素，并使用同步绘制方法。换句话说，使用 HTMLCanvasElement.

var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');

// modified version of image_display function
function image_display(img_name, current_div) {
  window.warmup_needed = true;
  chromeWorkaroundLoop(); // part of the timing mechanism
  setTimeout(function() {
    // clear previous
    ctx.clearRect( 0, 0, canvas.width, canvas.height );
    // request the painting to canvas
    // synchronous decoding + conversion to bitmap
    var img = images[img_name];
    // probably better to use a fixed sized canvas
    // but if you wish you could also change its width and height attrs
    var ratio = img.naturalHeight / img.naturalWidth;
    ctx.drawImage( img, 0, 0, canvas.width, canvas.width * ratio );
    // at this point it's been painted to the canvas,
    // remains only passing it to the screen
    requestPostAnimationFrame(function() {
      window.stim_start = performance.now();
      warmup_needed = false;
    });
  }, 100); // time needed for raF timing "warmup"
}


// preloading is kept the same
var preload = ['https://www.gstatic.com/webp/gallery/1.jpg', 'https://www.gstatic.com/webp/gallery3/1.png', 'https://www.gstatic.com/webp/gallery/4.jpg', 'https://www.gstatic.com/webp/gallery3/5.png'];
var promises = [];
var images = {};
// the function below preloads images; its completion is detected by the function at the end of this script
for (var i = 0; i < preload.length; i++) {
  (function(url, promise) {
    var filename = url.split('/').pop().split('#')[0].split('?')[0];
    images[filename] = new Image();
    images[filename].id = filename; // i need an id to later change its opacity
    images[filename].style.opacity = 0;
    images[filename].style.willChange = 'opacity';
    images[filename].style['max-height'] = '15%';
    images[filename].style['max-width'] = '15%';
    images[filename].onload = function() {
      promise.resolve();
    };
    images[filename].src = url;
  })(preload[i], promises[i] = $.Deferred());
}




// below are functions for precise timing; see 
function monkeyPatchRequestPostAnimationFrame() {
  const channel = new MessageChannel();
  const callbacks = [];
  let timestamp = 0;
  let called = false;
  channel.port2.onmessage = e => {
    called = false;
    const toCall = callbacks.slice();
    callbacks.length = 0;
    toCall.forEach(fn => {
      try {
        fn(timestamp);
      } catch (e) {}
    });
  };
  window.requestPostAnimationFrame = function(callback) {
    if (typeof callback !== 'function') {
      throw new TypeError('Argument 1 is not callable');
    }
    callbacks.push(callback);
    if (!called) {
      requestAnimationFrame((time) => {
        timestamp = time;
        channel.port1.postMessage('');
      });
      called = true;
    }
  };
}
if (typeof requestPostAnimationFrame !== 'function') {
  monkeyPatchRequestPostAnimationFrame();
}

function chromeWorkaroundLoop() {
  if (warmup_needed) {
    requestAnimationFrame(chromeWorkaroundLoop);
  }
}



// below i execute some example displays after preloading is complete

$.when.apply($, promises).done(function() {
  console.log("All images ready!");
  // now i can display images
  // e.g.:
  image_display('1.jpg', 'my_div');

  // then, e.g. 1 sec later another one

  setTimeout(function() {
    image_display('5.png', 'my_div');
  }, 1000);

});

canvas {
  max-width: 15%;
  max-height: 15%
}

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<canvas id="mycanvas" width="500" height="500"></canvas>

请注意，Web 浏览器远不是您要执行的操作的完美工具。他们更喜欢 UI 响应速度和低内存使用率，而不是响应时间准确性。

JavaScript 中的图像预加载和顺序显示

Image preload and sequential display in JavaScript

javascript

performance

image

timing

preload