如何在加载时准确显示图片？

Question

我正在为一个网站构建一个网页，用作心理实验（用于从用户收集数据）。我有一系列图片网址，我需要显示每张图片一段精确的时间（750毫秒）。之后，我需要提供一个包含用户想要回答的问题的表单，依此类推。

目前，我正在预加载所有这些图像（假设最小化HTTP请求引起的延迟）：

var imageArray = ...;

function preload() 
{
    var img = new Image();

    for (i = 0; i < imageArray.length; i++) 
    {
        img.src = imageArray[i];
    }
}

我有一个显示图片的功能：

function showPicture()
{
   setTimeout(showForm, 750);
}

并且，我有一个显示表单的函数：

function showForm()
{
  ...
}

我的问题是： 1.如何从图片完全加载的那一刻起开始计算时间，以保证所有这些图片将在确切的时间内显示给用户（我不知道是否还有其他延迟，例如渲染时间）？

2.有没有办法知道图片是完全加载还是仍在加载？

非常感谢！