在网站上短时间内显示图像的最快和最稳定的方法是什么？答案

【问题标题】：What the the fastest and most stable way to display an image for a very short time in website?在网站上短时间内显示图像的最快和最稳定的方法是什么？
【发布时间】：2015-12-10 12:24:44
【问题描述】：

我正在为心理学研究申请。在某些特定情况下，Web 应用程序需要在很短的时间内（例如 20-50 毫秒）显示图像。

从互联网加载图像不是问题，因为程序会在使用以下脚本进入站点时缓存所有图像。

  for stimulus in stimuli
    if stimulus
      extension = stimulus.split(".").pop()
      if extension.match(/png|jpg|jpeg|gif|bmp/i)
        # Pre-cache every image to the browser by creating dummy image DOMs
        image = $("<img src='#{stimulus}' style='display:none;'></img>")
        $(document.body).append(image)

但是，问题如下：当我将图像 DOM 附加到容器时，将立即创建一个计时器函数，在指定时间（如 10 毫秒）后，该函数将删除图像 DOM 并显示下一个图像。当超时时间足够长（> 100 毫秒）时，这非常有效，但有时如果超时时间很短（如 10-50 毫秒），图像就不会显示在屏幕上。我目前的工作是在图像被删除之前应用不透明动画几毫秒。这不仅不是一个好方法，有时（主观观察）图像会显示更长，有时会显示更短。

  # Call render function to get the image DOM
  $("#stimulus-container").append(stimulus.render(_i + 1, stimuli.length))
  if maxTimeout > 0
    nextTimer = setTimeout(->
      clearTimeout(nextTimer)
      # Current (bad) workaround defer the removal of the image DOM
      $("#stimulus-container *").animate({
        opacity: 0,
      }, 50, () ->
        # Remove current image and display next
        playStimulus(nextSequence)
      )
    # The designated time to display the image
    , maxTimeout
    )

我认为问题可能与 DOM 操作的延迟有关。我的代码有什么好的解决方法，还是应该使用其他方法（例如 CSS 动画/画布）重新实现？我是这些（CSS 动画/画布）的新手，因此建议实施的任何细节都将受到高度赞赏。关键是在屏幕上显示图像很短（且稳定）的时间。非常感谢您的关注。

【问题讨论】：

标签： javascript css image performance coffeescript

【解决方案1】：

你是对的，DOM 延迟有时可能太高，尤其是对于像这样的短时间框架内的操作。但是，您可以只使用一个 DOM 图像元素，预加载所有需要的图像，然后每 20 毫秒更改一次图像的 src 属性。

我为你编译了一个简短的演示：http://codepen.io/cgav/pen/MaKbJg?editors=101

HTML：

<img id="image" />

JS：

allImages = []
urls = [
  # the images' URLs go in here
]

DURATION = 10

startTimer = ->
  domImage = document.getElementById("image")
  counter = 0
  setInterval ->
    domImage.src = allImages[counter].dataurl
    counter++
    counter = 0 if counter is allImages.length
  , DURATION

storeNextDataURLFromImage = () ->
  url = urls.pop()
  if not url?
    return startTimer()

  img = new Image()
  img.crossOrigin = "Anonymous"  # this is needed to avoid http://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported 
  img.onload = (e) ->
    canvas = document.createElement("canvas")
    canvas.width = img.width
    canvas.height = img.height

    ctx = canvas.getContext("2d")
    ctx.drawImage(img, 0, 0)
    allImages.push {
      dataurl: canvas.toDataURL()
      width: img.width
      height: img.height
    }
    storeNextDataURLFromImage()

  img.src = url

storeNextDataURLFromImage()

【讨论】：