Какой самый быстрый и стабильный способ отображения изображения в течение очень короткого времени на веб-сайте?

Question

Я работаю над приложением для исследований психологии. В некоторых конкретных случаях веб-приложение должно отображать изображение в течение очень короткого промежутка времени (например, 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-анимация/Canvas для переопределения? Я новичок в них (CSS-анимация/холст), поэтому любые детали, предлагаемые для реализации, будут высоко оценены. Ключевым моментом является отображение изображения на экране в течение очень короткого (и стабильного) периода времени. Спасибо вам большое за ваше внимание.

Answer 1

Вы правы, задержки DOM иногда могут быть слишком высокими, особенно для манипуляций за короткий промежуток времени. Однако вы можете просто использовать один элемент изображения DOM, предварительно загрузить все необходимые изображения и изменить атрибут src изображения каждые 20 мс.

Я собрал короткий демо для вас: 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()