HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-12 16:48:12 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
d7e4698dba
jsPsych/7.1/overview/media-preloading/index.html

2148 lines
76 KiB
HTML
Executable File
Raw Blame History

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="canonical" href="https://www.jspsych.org/7.1/overview/media-preloading/">
<link rel="icon" href="../../img/jspsych-favicon.png">
<meta name="generator" content="mkdocs-1.2.2, mkdocs-material-7.2.4">
<title>Media Preloading - jsPsych</title>
<link rel="stylesheet" href="../../assets/stylesheets/main.f7f47774.min.css">
<link rel="stylesheet" href="../../assets/stylesheets/palette.3f5d1f46.min.css">
<meta name="theme-color" content="#4cae4f">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700%7CRoboto+Mono&display=fallback">
<style>:root{--md-text-font-family:"Roboto";--md-code-font-family:"Roboto Mono"}</style>
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-50563838-1","auto"),ga("set","anonymizeIp",!0),ga("send","pageview"),document.addEventListener("DOMContentLoaded",function(){document.forms.search&&document.forms.search.query.addEventListener("blur",function(){var e;this.value&&(e=document.location.pathname,ga("send","pageview",e+"?q="+this.value))}),"undefined"!=typeof location$&&location$.subscribe(function(e){ga("send","pageview",e.pathname)})})</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
</head>
<body dir="ltr" data-md-color-scheme="" data-md-color-primary="green" data-md-color-accent="orange">
<script>function __prefix(e){return new URL("../..",location).pathname+"."+e}function __get(e,t=localStorage){return JSON.parse(t.getItem(__prefix(e)))}</script>
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#media-preloading" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../.." title="jsPsych" class="md-header__button md-logo" aria-label="jsPsych" data-md-component="logo">
<img src="../../img/jspsych-logo-no-text-mono.svg" alt="logo">
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
jsPsych
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Media Preloading
</span>
</div>
</div>
</div>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
</button>
</nav>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/jspsych/jsPsych/" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
</div>
<div class="md-source__repository">
jspsych/jspsych
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../.." title="jsPsych" class="md-nav__button md-logo" aria-label="jsPsych" data-md-component="logo">
<img src="../../img/jspsych-logo-no-text-mono.svg" alt="logo">
</a>
jsPsych
</label>
<div class="md-nav__source">
<a href="https://github.com/jspsych/jsPsych/" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
</div>
<div class="md-source__repository">
jspsych/jspsych
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../.." class="md-nav__link">
Introduction
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
<label class="md-nav__link" for="__nav_2">
Tutorials
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Tutorials" data-md-level="1">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Tutorials
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../tutorials/hello-world/" class="md-nav__link">
The Basics: Hello World
</a>
</li>
<li class="md-nav__item">
<a href="../../tutorials/rt-task/" class="md-nav__link">
Demo Experiment: Simple Reaction Time Task
</a>
</li>
<li class="md-nav__item">
<a href="../../tutorials/video-tutorials/" class="md-nav__link">
Video Tutorials
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" checked>
<label class="md-nav__link" for="__nav_3">
Overview
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Overview" data-md-level="1">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
Overview
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../timeline/" class="md-nav__link">
Creating an Experiment: The Timeline
</a>
</li>
<li class="md-nav__item">
<a href="../plugins/" class="md-nav__link">
Plugins
</a>
</li>
<li class="md-nav__item">
<a href="../extensions/" class="md-nav__link">
Extensions
</a>
</li>
<li class="md-nav__item">
<a href="../dynamic-parameters/" class="md-nav__link">
Dynamic Parameters
</a>
</li>
<li class="md-nav__item">
<a href="../style/" class="md-nav__link">
Controlling Visual Appearance
</a>
</li>
<li class="md-nav__item">
<a href="../data/" class="md-nav__link">
Data Storage, Aggregation, and Manipulation
</a>
</li>
<li class="md-nav__item">
<a href="../simulation/" class="md-nav__link">
Simulation Modes
</a>
</li>
<li class="md-nav__item">
<a href="../running-experiments/" class="md-nav__link">
Running Experiments
</a>
</li>
<li class="md-nav__item">
<a href="../experiment-options/" class="md-nav__link">
Experiment Settings
</a>
</li>
<li class="md-nav__item">
<a href="../events/" class="md-nav__link">
Events
</a>
</li>
<li class="md-nav__item">
<a href="../record-browser-interactions/" class="md-nav__link">
Record Browser Interactions
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
Media Preloading
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
Media Preloading
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#automatic-preloading" class="md-nav__link">
Automatic Preloading
</a>
</li>
<li class="md-nav__item">
<a href="#manual-preloading" class="md-nav__link">
Manual preloading
</a>
</li>
<li class="md-nav__item">
<a href="#combining-automatic-and-manual-preloading" class="md-nav__link">
Combining automatic and manual preloading
</a>
</li>
<li class="md-nav__item">
<a href="#preloading-in-batches" class="md-nav__link">
Preloading in batches
</a>
</li>
<li class="md-nav__item">
<a href="#preloading-progress-bar" class="md-nav__link">
Preloading progress bar
</a>
</li>
<li class="md-nav__item">
<a href="#loading-time-limits" class="md-nav__link">
Loading time limits
</a>
</li>
<li class="md-nav__item">
<a href="#loading-and-error-messages" class="md-nav__link">
Loading and error messages
</a>
</li>
<li class="md-nav__item">
<a href="#options-for-handling-errors" class="md-nav__link">
Options for handling errors
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../fullscreen/" class="md-nav__link">
Fullscreen Experiments
</a>
</li>
<li class="md-nav__item">
<a href="../eye-tracking/" class="md-nav__link">
Eye Tracking
</a>
</li>
<li class="md-nav__item">
<a href="../exclude-browser/" class="md-nav__link">
Exclude Participants Based on Browser Features
</a>
</li>
<li class="md-nav__item">
<a href="../progress-bar/" class="md-nav__link">
Automatic Progress Bar
</a>
</li>
<li class="md-nav__item">
<a href="../prolific/" class="md-nav__link">
Integrating with Prolific
</a>
</li>
<li class="md-nav__item">
<a href="../mturk/" class="md-nav__link">
Integrating with Mechanical Turk
</a>
</li>
<li class="md-nav__item">
<a href="../browser-device-support/" class="md-nav__link">
Browser and Device Support
</a>
</li>
<li class="md-nav__item">
<a href="../timing-accuracy/" class="md-nav__link">
Timing Accuracy
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" >
<label class="md-nav__link" for="__nav_4">
Reference
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Reference" data-md-level="1">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Reference
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../reference/jspsych/" class="md-nav__link">
jsPsych
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/jspsych-data/" class="md-nav__link">
jsPsych.data
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/jspsych-randomization/" class="md-nav__link">
jsPsych.randomization
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/jspsych-turk/" class="md-nav__link">
jsPsych.turk
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/jspsych-pluginAPI/" class="md-nav__link">
jsPsych.pluginAPI
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
<label class="md-nav__link" for="__nav_5">
Plugins
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Plugins" data-md-level="1">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
Plugins
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../plugins/list-of-plugins/" class="md-nav__link">
List of Plugins
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/animation/" class="md-nav__link">
animation
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/audio-button-response/" class="md-nav__link">
audio-button-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/audio-keyboard-response/" class="md-nav__link">
audio-keyboard-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/audio-slider-response/" class="md-nav__link">
audio-slider-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/browser-check/" class="md-nav__link">
browser-check
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/call-function/" class="md-nav__link">
call-function
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/canvas-button-response/" class="md-nav__link">
canvas-button-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/canvas-keyboard-response/" class="md-nav__link">
canvas-keyboard-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/canvas-slider-response/" class="md-nav__link">
canvas-slider-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/categorize-animation/" class="md-nav__link">
categorize-animation
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/categorize-html/" class="md-nav__link">
categorize-html
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/categorize-image/" class="md-nav__link">
categorize-image
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/cloze/" class="md-nav__link">
cloze
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/external-html/" class="md-nav__link">
external-html
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/free-sort/" class="md-nav__link">
free-sort
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/fullscreen/" class="md-nav__link">
fullscreen
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/html-audio-response/" class="md-nav__link">
html-audio-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/html-button-response/" class="md-nav__link">
html-button-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/html-keyboard-response/" class="md-nav__link">
html-keyboard-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/html-slider-response/" class="md-nav__link">
html-slider-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/iat-html/" class="md-nav__link">
iat-html
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/iat-image/" class="md-nav__link">
iat-image
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/image-button-response/" class="md-nav__link">
image-button-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/image-keyboard-response/" class="md-nav__link">
image-keyboard-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/image-slider-response/" class="md-nav__link">
image-slider-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/initialize-microphone/" class="md-nav__link">
initialize-microphone
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/instructions/" class="md-nav__link">
instructions
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/maxdiff/" class="md-nav__link">
maxdiff
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/preload/" class="md-nav__link">
preload
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/reconstruction/" class="md-nav__link">
reconstruction
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/resize/" class="md-nav__link">
resize
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/same-different-html/" class="md-nav__link">
same-different-html
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/same-different-image/" class="md-nav__link">
same-different-image
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/serial-reaction-time/" class="md-nav__link">
serial-reaction-time
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/serial-reaction-time-mouse/" class="md-nav__link">
serial-reaction-time-mouse
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/sketchpad/" class="md-nav__link">
sketchpad
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/survey/" class="md-nav__link">
survey
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/survey-html-form/" class="md-nav__link">
survey-html-form
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/survey-likert/" class="md-nav__link">
survey-likert
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/survey-multi-choice/" class="md-nav__link">
survey-multi-choice
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/survey-multi-select/" class="md-nav__link">
survey-multi-select
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/survey-text/" class="md-nav__link">
survey-text
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/video-button-response/" class="md-nav__link">
video-button-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/video-keyboard-response/" class="md-nav__link">
video-keyboard-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/video-slider-response/" class="md-nav__link">
video-slider-response
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/virtual-chinrest/" class="md-nav__link">
virtual-chinrest
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/visual-search-circle/" class="md-nav__link">
visual-search-circle
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/webgazer-calibrate/" class="md-nav__link">
webgazer-calibrate
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/webgazer-init-camera/" class="md-nav__link">
webgazer-init-camera
</a>
</li>
<li class="md-nav__item">
<a href="../../plugins/webgazer-validate/" class="md-nav__link">
webgazer-validate
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
<label class="md-nav__link" for="__nav_6">
Extensions
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Extensions" data-md-level="1">
<label class="md-nav__title" for="__nav_6">
<span class="md-nav__icon md-icon"></span>
Extensions
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../extensions/list-of-extensions/" class="md-nav__link">
List of Extensions
</a>
</li>
<li class="md-nav__item">
<a href="../../extensions/mouse-tracking/" class="md-nav__link">
mouse-tracking
</a>
</li>
<li class="md-nav__item">
<a href="../../extensions/webgazer/" class="md-nav__link">
webgazer
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
<label class="md-nav__link" for="__nav_7">
Developers
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Developers" data-md-level="1">
<label class="md-nav__title" for="__nav_7">
<span class="md-nav__icon md-icon"></span>
Developers
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../developers/configuration/" class="md-nav__link">
Configuration
</a>
</li>
<li class="md-nav__item">
<a href="../../developers/contributing/" class="md-nav__link">
Contributing to jsPsych
</a>
</li>
<li class="md-nav__item">
<a href="../../developers/plugin-development/" class="md-nav__link">
Plugin Development
</a>
</li>
<li class="md-nav__item">
<a href="../../developers/extension-development/" class="md-nav__link">
Extension Development
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_8" type="checkbox" id="__nav_8" >
<label class="md-nav__link" for="__nav_8">
Support
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="Support" data-md-level="1">
<label class="md-nav__title" for="__nav_8">
<span class="md-nav__icon md-icon"></span>
Support
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../support/support/" class="md-nav__link">
Getting Help
</a>
</li>
<li class="md-nav__item">
<a href="../../support/migration-v7/" class="md-nav__link">
Migrating from 6.x to 7.x
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_9" type="checkbox" id="__nav_9" >
<label class="md-nav__link" for="__nav_9">
About
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="About" data-md-level="1">
<label class="md-nav__title" for="__nav_9">
<span class="md-nav__icon md-icon"></span>
About
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../about/about/" class="md-nav__link">
About jsPsych
</a>
</li>
<li class="md-nav__item">
<a href="../../about/license/" class="md-nav__link">
License
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#automatic-preloading" class="md-nav__link">
Automatic Preloading
</a>
</li>
<li class="md-nav__item">
<a href="#manual-preloading" class="md-nav__link">
Manual preloading
</a>
</li>
<li class="md-nav__item">
<a href="#combining-automatic-and-manual-preloading" class="md-nav__link">
Combining automatic and manual preloading
</a>
</li>
<li class="md-nav__item">
<a href="#preloading-in-batches" class="md-nav__link">
Preloading in batches
</a>
</li>
<li class="md-nav__item">
<a href="#preloading-progress-bar" class="md-nav__link">
Preloading progress bar
</a>
</li>
<li class="md-nav__item">
<a href="#loading-time-limits" class="md-nav__link">
Loading time limits
</a>
</li>
<li class="md-nav__item">
<a href="#loading-and-error-messages" class="md-nav__link">
Loading and error messages
</a>
</li>
<li class="md-nav__item">
<a href="#options-for-handling-errors" class="md-nav__link">
Options for handling errors
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<a href="https://github.com/jspsych/jsPsych/edit/master/docs/overview/media-preloading.md" title="Edit this page" class="md-content__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>
</a>
<h1 id="media-preloading">Media Preloading<a class="headerlink" href="#media-preloading" title="Permanent link">&para;</a></h1>
<p>If an experiment uses image, audio, or video files as stimuli, it is a good idea to preload the files before running the experiment. You can preload files at any point in your experiment using the <a href="../../plugins/preload/">jsPsych <code>preload</code> plugin</a>. Preloading files means that the subject's browser will download the files and store them in local memory on the subject's computer. This is important because displaying or playing a media file is much faster if it is already in memory on the subject's computer. Without preloading, there will be noticeable delays in the display of media, which will affect any timing measurements (such as how long an image is displayed, or a subject's response time since first viewing an image). For particularly large files, like video, preloading content avoids lengthy pauses in the middle of the experiment that can be disruptive to the flow of the experiment.</p>
<div class="admonition warning">
<p class="admonition-title">Warning<p>Note that video preloading will not work when you run your experiment offline (e.g., by double-clicking on the HTML file), but it will work once your experiment is running online (hosted on a server). The <a href="../running-experiments/#cross-origin-requests-cors-and-safe-mode">Cross-origin requests (CORS) and safe mode</a> section on the Running Experiments page contains more information about this.</p>
</p>
</div>
<h2 id="automatic-preloading">Automatic Preloading<a class="headerlink" href="#automatic-preloading" title="Permanent link">&para;</a></h2>
<p>jsPsych can automatically preload audio, video, and image files that are used as parameters for the standard set of plugins, based on the timeline that is passed to <code>jsPsych.run</code>. You must initiate this preloading using a <code>preload</code> trial. You should add this <code>preload</code> trial into your timeline when you want the preloading to occur, and set the <code>auto_preload</code> parameter to <code>true</code>.</p>
<div class="highlight"><pre><span></span><code><span class="c1">// the &quot;auto_preload: true&quot; setting tells the plugin to automatically find </span>
<span class="c1">// stimuli to preload based the main experiment timeline (used in jsPsych.run)</span>
<span class="kd">var</span> <span class="nx">preload</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychPreload</span><span class="p">,</span>
<span class="nx">auto_preload</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">}</span>
<span class="c1">// this image file can be automatically preloaded </span>
<span class="kd">var</span> <span class="nx">image_trial</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychImageKeyboardResponse</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;img/file1.png&#39;</span>
<span class="p">}</span>
<span class="c1">// the sound file can be automatically preloaded </span>
<span class="kd">var</span> <span class="nx">sound_trial</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychAudioKeyboardResponse</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;audio/hello.mp3&#39;</span>
<span class="p">}</span>
<span class="c1">// the video file can be automatically preloaded (as long as the experiment </span>
<span class="c1">// is running on a server)</span>
<span class="kd">var</span> <span class="nx">video_trial</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychVideoKeyboardResponse</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;video/sample_video.mp4&#39;</span><span class="p">]</span>
<span class="p">}</span>
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">run</span><span class="p">([</span><span class="nx">preload</span><span class="p">,</span> <span class="nx">image_trial</span><span class="p">,</span> <span class="nx">sound_trial</span><span class="p">,</span> <span class="nx">video_trial</span><span class="p">]);</span>
</code></pre></div>
<h2 id="manual-preloading">Manual preloading<a class="headerlink" href="#manual-preloading" title="Permanent link">&para;</a></h2>
<p>If you are using media files in your experiment but they are not being passed directly as parameters to the trials (e.g., because you are using functions as parameters that return the media files, you are using timeline variables, or you are embedding the media files in an HTML string), then these files will not be detected when you use the <code>auto_preload</code> option, so you must manually specify them. The <code>preload</code> plugin allows you to add these files using the <code>images</code>, <code>audio</code> and <code>video</code> parameters.</p>
<div class="highlight"><pre><span></span><code><span class="c1">// this image file cannot be automatically preloaded because it is embedded in </span>
<span class="c1">// an HTML string</span>
<span class="kd">var</span> <span class="nx">image_trial</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychHtmlKeyboardResponse</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;&lt;img src=&quot;img/file1.png&quot;&gt;&lt;/img&gt;&#39;</span><span class="p">,</span>
<span class="p">}</span>
<span class="c1">// this audio file cannot be automatically preloaded because it is returned </span>
<span class="c1">// from a function</span>
<span class="kd">var</span> <span class="nx">sound_trial</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychAudioKeyboardResponse</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="k">return</span> <span class="s1">&#39;audio/sound1.mp3&#39;</span> <span class="p">}</span>
<span class="p">}</span>
<span class="c1">// these video files cannot be automatically preloaded because they are passed </span>
<span class="c1">// into a trial using the jsPsych.timelineVariable function</span>
<span class="kd">var</span> <span class="nx">video_trials</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[</span>
<span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychVideoKeyboardResponse</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="nx">jsPsych</span><span class="p">.</span><span class="nx">timelineVariable</span><span class="p">(</span><span class="s1">&#39;video&#39;</span><span class="p">)</span>
<span class="p">}</span>
<span class="p">],</span>
<span class="nx">timeline_variables</span><span class="o">:</span> <span class="p">[</span>
<span class="p">{</span><span class="nx">video</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;video/1.mp4&#39;</span><span class="p">]},</span>
<span class="p">{</span><span class="nx">video</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;video/2.mp4&#39;</span><span class="p">]}</span>
<span class="p">]</span>
<span class="p">}</span>
<span class="c1">// to manually preload media files, create an array of file paths for each </span>
<span class="c1">// media type</span>
<span class="kd">var</span> <span class="nx">images</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;img/file1.png&#39;</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">audio</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;audio/sound1.mp3&#39;</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">video</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;video/1.mp4&#39;</span><span class="p">,</span> <span class="s1">&#39;video/2.mp4&#39;</span><span class="p">];</span>
<span class="c1">// these array can be passed into the preload plugin using the images, audio </span>
<span class="c1">// and video parameters</span>
<span class="kd">var</span> <span class="nx">preload</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychPreload</span><span class="p">,</span>
<span class="nx">images</span><span class="o">:</span> <span class="nx">images</span><span class="p">,</span>
<span class="nx">audio</span><span class="o">:</span> <span class="nx">audio</span><span class="p">,</span>
<span class="nx">video</span><span class="o">:</span> <span class="nx">video</span>
<span class="p">}</span>
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">run</span><span class="p">([</span><span class="nx">preload</span><span class="p">,</span> <span class="nx">image_trial</span><span class="p">,</span> <span class="nx">sound_trial</span><span class="p">,</span> <span class="nx">video_trials</span><span class="p">]);</span>
</code></pre></div>
<h2 id="combining-automatic-and-manual-preloading">Combining automatic and manual preloading<a class="headerlink" href="#combining-automatic-and-manual-preloading" title="Permanent link">&para;</a></h2>
<p>It's possible to combine automatic and manual preloading. For instance, you may want to automatically preload all of the media files based on your experiment timeline, while also manually preloading any files that can't be automatically preloaded. Any duplicate file names across all preloading methods will be removed before preloading starts, so including the same file names in multiple <code>preload</code> parameters will not affect the preloading duration. </p>
<div class="highlight"><pre><span></span><code><span class="c1">// this file can be preloaded automatically</span>
<span class="kd">var</span> <span class="nx">image_trial</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychImageKeyboardResponse</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;img/file1.png&#39;</span>
<span class="p">}</span>
<span class="c1">// this file can be preloaded automatically</span>
<span class="kd">var</span> <span class="nx">sound_trial</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychAudioKeyboardResponse</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;audio/hello.mp3&#39;</span>
<span class="p">}</span>
<span class="c1">// these files must be preloaded manually</span>
<span class="kd">var</span> <span class="nx">video_trials</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[</span>
<span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychVideoKeyboardResponse</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="nx">jsPsych</span><span class="p">.</span><span class="nx">timelineVariable</span><span class="p">(</span><span class="s1">&#39;video&#39;</span><span class="p">)</span>
<span class="p">}</span>
<span class="p">],</span>
<span class="nx">timeline_variables</span><span class="o">:</span> <span class="p">[</span>
<span class="p">{</span><span class="nx">video</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;video/1.mp4&#39;</span><span class="p">]},</span>
<span class="p">{</span><span class="nx">video</span><span class="o">:</span> <span class="p">[</span><span class="s1">&#39;video/2.mp4&#39;</span><span class="p">]}</span>
<span class="p">]</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">video</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;video/1.mp4&#39;</span><span class="p">,</span> <span class="s1">&#39;video/2.mp4&#39;</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">preload</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychPreload</span><span class="p">,</span>
<span class="nx">auto_preload</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// automatically preload the image and audio files</span>
<span class="nx">video</span><span class="o">:</span> <span class="nx">video</span> <span class="c1">// manually preload the videos used with timeline variables</span>
<span class="p">}</span>
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">run</span><span class="p">([</span><span class="nx">preload</span><span class="p">,</span> <span class="nx">image_trial</span><span class="p">,</span> <span class="nx">sound_trial</span><span class="p">,</span> <span class="nx">video_trials</span><span class="p">]);</span>
</code></pre></div>
<h2 id="preloading-in-batches">Preloading in batches<a class="headerlink" href="#preloading-in-batches" title="Permanent link">&para;</a></h2>
<p>Some experiments use many and/or large media files. This can cause problems when participants have slow and/or unreliable internet connections, because it increases the chances of loading errors during preloading. This can also cause problems with file caching, i.e. ensuring that the preloaded files remain in the browser's memory, because loading all stimuli at once may exceed the browser's cache limits. One option for mitigating these problems is to load the media files in smaller batches throughout the experiment. Files should be preloaded as close as possible to when they will be needed. For instance, if you have several blocks of trials, then right before each block, you can preload the stimuli that are needed for that block.</p>
<p>Here is an example with trials where the stimuli files can be preloaded automatically. In this case, the <code>trials</code> parameter is used to tell the <code>preload</code> plugin to preload the stimuli from a specific part of the timeline. </p>
<div class="highlight"><pre><span></span><code><span class="c1">// these image files in these trial blocks can be automatically preloaded</span>
<span class="kd">var</span> <span class="nx">block_1</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[</span>
<span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychImageKeyboardResponse</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;img/file1.png&#39;</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychImageKeyboardResponse</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;img/file2.png&#39;</span>
<span class="p">}</span>
<span class="p">]</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">block_2</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[</span>
<span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychImageKeyboardResponse</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;img/file3.png&#39;</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychImageKeyboardResponse</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;img/file4.png&#39;</span>
<span class="p">}</span>
<span class="p">]</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">preload_1</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychPreload</span><span class="p">,</span>
<span class="nx">trials</span><span class="o">:</span> <span class="nx">block_1</span> <span class="c1">// automatically preload just the images from block_1 trials</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">preload_2</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychPreload</span><span class="p">,</span>
<span class="nx">trials</span><span class="o">:</span> <span class="nx">block_2</span> <span class="c1">// automatically preload just the images from block_2 trials</span>
<span class="p">}</span>
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">run</span><span class="p">(</span>
<span class="c1">// add each preload trial onto the timeline before the appropriate trial block</span>
<span class="p">[</span><span class="nx">preload_1</span><span class="p">,</span> <span class="nx">block_1</span><span class="p">,</span> <span class="nx">preload_2</span><span class="p">,</span> <span class="nx">block_2</span><span class="p">]</span>
<span class="p">);</span>
</code></pre></div>
<p>Below is an example with trials where the stimuli files cannot be preloaded automatically, because the stimuli files are passed to the trials via <code>jsPsych.timelineVariable</code>. In this case, we create separate arrays for each batch of files, and then pass those arrays to the each preload trial.</p>
<div class="highlight"><pre><span></span><code><span class="c1">// these trial blocks cannot be automatically preloaded because </span>
<span class="c1">// the media files are passed to the trial parameters with timeline variables</span>
<span class="kd">var</span> <span class="nx">block_1</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[...],</span>
<span class="nx">timeline_variables</span><span class="o">:</span> <span class="p">[</span>
<span class="p">{</span><span class="nx">stim</span><span class="o">:</span> <span class="s1">&#39;file1.png&#39;</span><span class="p">},</span>
<span class="p">{</span><span class="nx">stim</span><span class="o">:</span> <span class="s1">&#39;file1.png&#39;</span><span class="p">}</span>
<span class="p">]</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">block_2</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[...],</span>
<span class="nx">timeline_variables</span><span class="o">:</span> <span class="p">[</span>
<span class="p">{</span><span class="nx">stim</span><span class="o">:</span> <span class="s1">&#39;file3.png&#39;</span><span class="p">},</span>
<span class="p">{</span><span class="nx">stim</span><span class="o">:</span> <span class="s1">&#39;file4.png&#39;</span><span class="p">}</span>
<span class="p">]</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">images_block_1</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;file1.png&#39;</span><span class="p">,</span> <span class="s1">&#39;file2.png&#39;</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">images_block_2</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;file3.png&#39;</span><span class="p">,</span> <span class="s1">&#39;file4.png&#39;</span><span class="p">];</span>
<span class="c1">// preload trial for preloading the block 1 stimuli</span>
<span class="kd">var</span> <span class="nx">preload_1</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychPreload</span><span class="p">,</span>
<span class="nx">images</span><span class="o">:</span> <span class="nx">images_block_1</span>
<span class="p">}</span>
<span class="c1">// preload trial for preloading the block 2 stimuli</span>
<span class="kd">var</span> <span class="nx">preload_2</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychPreload</span><span class="p">,</span>
<span class="nx">images</span><span class="o">:</span> <span class="nx">images_block_2</span>
<span class="p">}</span>
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">run</span><span class="p">(</span>
<span class="c1">// add each preload trial to the timeline before the appropriate trial block</span>
<span class="p">[</span><span class="nx">preload_1</span><span class="p">,</span> <span class="nx">block_1</span><span class="p">,</span> <span class="nx">preload_2</span><span class="p">,</span> <span class="nx">block_2</span><span class="p">]</span>
<span class="p">);</span>
</code></pre></div>
<h2 id="preloading-progress-bar">Preloading progress bar<a class="headerlink" href="#preloading-progress-bar" title="Permanent link">&para;</a></h2>
<p>By default, the <code>preload</code> plugin will display a progress bar while files are being preloaded. This progress bar represents all files that are being preloaded during the trial, regardless of whether the file is being preloaded automatically via the <code>auto_preload</code> or <code>trials</code> parameters, or manually via the <code>audio</code>, <code>images</code>, and <code>video</code> parameters. You may wish to turn the preload progress bar off if you are only loading a small number of files, as it will appear and disappear so quickly that the participant may be confused about what it was. You can control whether the preloading progress bar appears by setting the <code>show_progress_bar</code> parameter in the <code>preload</code> trial.</p>
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">preload_trial</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychPreload</span><span class="p">,</span>
<span class="nx">auto_preload</span><span class="o">:</span> <span class="kc">true</span>
<span class="nx">show_progress_bar</span><span class="o">:</span> <span class="kc">false</span> <span class="c1">// hide progress bar</span>
<span class="p">}</span>
</code></pre></div>
<h2 id="loading-time-limits">Loading time limits<a class="headerlink" href="#loading-time-limits" title="Permanent link">&para;</a></h2>
<p>It's usually a good idea to set a time limit for file loading, to ensure that participants aren't waiting for an unreasonable amount of time. Time limits can be specified in milliseconds using the <code>max_load_time</code> parameter. If you set a loading time limit and all files haven't finished loading before this time, then the <code>preload</code> trial will either stop an error (if <code>continue_after_error</code> is false, the default) or the trial will end and the experiment will continue (if <code>continue_after_error</code> is <code>true</code>). If <code>max_load_time</code> is <code>null</code> (the default), then there is no time limit. </p>
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">preload_trial</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychPreload</span><span class="p">,</span>
<span class="nx">auto_preload</span><span class="o">:</span> <span class="kc">true</span>
<span class="nx">max_load_time</span><span class="o">:</span> <span class="mf">60000</span> <span class="c1">// 1 minute</span>
<span class="p">}</span>
</code></pre></div>
<h2 id="loading-and-error-messages">Loading and error messages<a class="headerlink" href="#loading-and-error-messages" title="Permanent link">&para;</a></h2>
<p>It's possible to specify custom messages to be shown on the page while the media files are loading, and in case of one or more file loading errors. The <code>message</code> parameter allows you to customize the loading message using an HML-formatted string. If <code>show_progress_bar</code> is <code>true</code>, then this message will be shown above the progress bar. </p>
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">preload_trial</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychPreload</span><span class="p">,</span>
<span class="nx">auto_preload</span><span class="o">:</span> <span class="kc">true</span>
<span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;Please wait while the experiment loads. This may take a few minutes.&#39;</span><span class="p">,</span>
<span class="p">}</span>
</code></pre></div>
<p>A preloading error will occur when either (a) one or more files produces a loading error, and/or (b) all files have not finished loading before the <code>max_load_time</code> duration. The <code>error_message</code> parameter allows you to customize the messsage that's shown on the page in these cases. This message will only be shown if <code>continue_after_error</code> is <code>false</code> (the default). </p>
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">preload_trial</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychPreload</span><span class="p">,</span>
<span class="nx">auto_preload</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">error_message</span><span class="o">:</span> <span class="s1">&#39;The experiment failed to load. Please contact the researcher.&#39;</span>
<span class="p">}</span>
</code></pre></div>
<p>In addition to the <code>error_message</code> parameter, it's also possible to show more detailed error messages on the page about any files that failed to load. You can control this with the <code>show_detailed_errors</code> parameter. Detailed error messages will appear below the general error message. This only applies if <code>continue_after_error</code> is <code>false</code> (the default). </p>
<p>Detailed error messages can be useful when testing and debugging your experiment. If <code>show_detailed_errors</code> is <code>true</code>, then if one or more loading errors occurs before the <code>max_load_time</code> is reached, then the error page will also contian a list of the file(s) that produced an error, along with error information (if there is any). Note that this may not be a complete list, because it will only report any errors that occurred before the <code>max_load_time</code> was reached. If there are no file loading errors but preloading hasn't finished before the <code>max_load_time</code>, then detailed error message will just tell you that loading timed out. </p>
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">preload_trial</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychPreload</span><span class="p">,</span>
<span class="nx">auto_preload</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="c1">// show details of any file loading errors and/or loading time out</span>
<span class="nx">show_detailed_errors</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">}</span>
</code></pre></div>
<h2 id="options-for-handling-errors">Options for handling errors<a class="headerlink" href="#options-for-handling-errors" title="Permanent link">&para;</a></h2>
<p>If <code>continue_after_error</code> is <code>true</code>, then the experiment <em>will not stop</em> if one or more files fails to load. Instead, the trial will end and the experiment will continue. However, the preload trial data will contain a property called <code>success</code>, which is whether or not all files were loaded successfully, <code>timeout</code>, which is whether or not the files loaded successfully before the <code>max_load_time</code>. The preload trial data will also contain lists of any <code>image</code>, <code>audio</code>, and <code>video</code> files that failed to load. This gives you the option to continue the experiment after preloading fails and use the preload trial data decide what to do next. For instance, you may decide to skip the trials that use the stimuli files that failed to load, or try loading the failed files again. Another option is to simply end the experiment when preloading fails, but send the data back to your server so that you have more information about the loading failure.</p>
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">preload_trial</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychPreload</span><span class="p">,</span>
<span class="nx">auto_preload</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;Please wait while the experiment loads...&#39;</span><span class="p">,</span>
<span class="c1">// don&#39;t stop the experiment if there are file loading errors or if loading times out</span>
<span class="nx">continue_after_error</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">save_data</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychCallFunction</span><span class="p">,</span>
<span class="nx">async</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">func</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">done</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="nx">jsPsych</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">get</span><span class="p">().</span><span class="nx">json</span><span class="p">();</span>
<span class="nx">save_data</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span><span class="nx">done</span><span class="p">()})</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// the experiment will stop here, since there are no valid key choices or trial duration </span>
<span class="kd">var</span> <span class="nx">fail_message</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychHtmlKeyboardResponse</span><span class="p">,</span>
<span class="nx">stimulus</span><span class="o">:</span> <span class="s1">&#39;The experiment failed to load. Please contact the researcher.&#39;</span><span class="p">,</span>
<span class="nx">choices</span><span class="o">:</span> <span class="s2">&quot;NO_KEYS&quot;</span><span class="p">,</span>
<span class="nx">trial_duration</span><span class="o">:</span> <span class="kc">null</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">if_loading_fails</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">timeline</span><span class="o">:</span> <span class="p">[</span><span class="nx">save_data</span><span class="p">,</span> <span class="nx">fail_message</span><span class="p">],</span>
<span class="nx">conditional_function</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">jsPsych</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">getLastTrialData</span><span class="p">()[</span><span class="mf">0</span><span class="p">].</span><span class="nx">values</span><span class="p">().</span><span class="nx">success</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// preloading was successful, so skip this conditional timeline</span>
<span class="c1">// and move on with the experiment</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="c1">// preloading failed, so run this conditional timeline:</span>
<span class="c1">// save the data to the server and show the fail message</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// ... rest of experiment</span>
<span class="nx">jsPsych</span><span class="p">.</span><span class="nx">run</span><span class="p">([</span><span class="nx">preload_trial</span><span class="p">,</span> <span class="nx">if_loading_fails</span><span class="p">,</span> <span class="p">...</span> <span class="p">])</span>
</code></pre></div>
<p>The <code>preload</code> plugin's <code>on_success</code> and <code>on_error</code> callback functions provide another way of tracking preloading progress and handling file loading errors. These functions are called after any file either loads successfully or produces an error, respectively. These functions receive a single argument, which is the path of the file (string) that loaded or produced an error.</p>
<div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">file_load_count</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">file_error_count</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">preload_trial</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">jsPsychPreload</span><span class="p">,</span>
<span class="nx">auto_preload</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">on_error</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">file</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">file_error_count</span><span class="o">++</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Error: &#39;</span><span class="p">,</span><span class="nx">file</span><span class="p">);</span>
<span class="p">},</span>
<span class="nx">on_success</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">file</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">file_load_count</span><span class="o">++</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Loaded: &#39;</span><span class="p">,</span><span class="nx">file</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">};</span>
</code></pre></div>
<p>Note that there's no guarantee that any/all files will trigger one of these two callback functions, because they are cancelled after the <code>preload</code> trial ends. For instance, if a file takes longer to load then the <code>max_load_time</code>, then the <code>preload</code> trial will end due to timing out, and the <code>on_success</code> and <code>on_error</code> callbacks for any in-progress files will be cancelled.</p>
</article>
</div>
</div>
</main>
<footer class="md-footer">
<nav class="md-footer__inner md-grid" aria-label="Footer">
<a href="../record-browser-interactions/" class="md-footer__link md-footer__link--prev" aria-label="Previous: Record Browser Interactions" rel="prev">
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
</div>
<div class="md-footer__title">
<div class="md-ellipsis">
<span class="md-footer__direction">
Previous
</span>
Record Browser Interactions
</div>
</div>
</a>
<a href="../fullscreen/" class="md-footer__link md-footer__link--next" aria-label="Next: Fullscreen Experiments" rel="next">
<div class="md-footer__title">
<div class="md-ellipsis">
<span class="md-footer__direction">
Next
</span>
Fullscreen Experiments
</div>
</div>
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg>
</div>
</a>
</nav>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-footer-copyright">
<div class="md-footer-copyright__highlight">
Copyright &copy; 2012-2021 Josh de Leeuw
</div>
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
<div class="md-footer-social">
<a href="https://github.com/jspsych" target="_blank" rel="noopener" title="github.com" class="md-footer-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
</a>
<a href="https://twitter.com/joshdeleeuw" target="_blank" rel="noopener" title="twitter.com" class="md-footer-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../..", "features": [], "translations": {"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing", "select.version.title": "Select version"}, "search": "../../assets/javascripts/workers/search.709b4209.min.js", "version": {"provider": "mike"}}</script>
<script src="../../assets/javascripts/bundle.febc23d1.min.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink