我想要的是以下内容：
- 预加载图像（最多40至50张），并在完成后进行回调（例如警报）（我认为这部分已经很好了）
- 要点：在同一
div中一个接一个地显示图像，并尽可能精确地记录显示时间（而且，任何图像都可以显示多次） - 在另一个
div中显示相同的图像（如果我有第2点的话，这应该很容易）
更多背景信息：这是一个响应时间实验，在线参与者可以看到图片并对其做出关键响应（并测量他们的响应时间）。 （此外，显示器之间至少要有200-500毫秒的间隔，因此在每次显示之前准备工作都需要一点时间也是没有问题的。）
我已经有完整的工作代码，可以将它与以前的各种答案结合在一起：有人可以验证我的代码是否有意义，还有什么我可以做的才能使它更有效？
令我困惑的一件事是“ appendChild”在浏览器中的确切作用。 （换句话说：我知道该元素将被添加到页面中，但是我不知道这对浏览器意味着什么。）目前，我在实际显示图像之前将图像附加了一点（100毫秒） ，然后将不透明度从0设置为1（which is presumed to be the most optimal method for precise timing）。然后，在显示下一张图像之前，删除该图像（空div）。但是我想知道这样做是否有任何意义。例如，如果我添加了所有已经在“预加载阶段”中的图像，并且只要不需要它们就将其不透明度设置为0，该怎么办？这如何影响性能？否则，如果（不希望这样做）在不透明性更改之前添加它们怎么办？ “追加”是否需要任何时间，或者是否可以以任何方式影响即将发生的不透明性更改的时间？ （编辑：现在我有了主要问题的答案，但是得到关于这一点的解释仍然很好。）
一个明显的问题是，我无法真正精确地测量显示时间（没有外部硬件），因此我不得不依靠“似乎有意义”的东西。
无论如何，下面是我的代码。
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 https://stackoverflow.com/questions/50895206/
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>