Home › Development Diaries › L's blog

Revision of Twine: preloading images from Tue, 02/12/2013 - 23:19

Fri, 01/18/2013 - 09:47 — L

If you use a lot of images in your Twine game, it would be very good of you if you preloaded them at the start of the game - having to wait for images to load during a story, even momentarily, can be distracting.

Now you could bother to convert them all to inline Base64, but there's other, less intrusive ways. You could, rather, put every image in your story in invisible img tags in the Start passage:

<html>
<img src="  [url of an image ] " style="display:none;" >
...
</html>

...but of course, that requires you to manually list every image yourself. Here is my recommendation: use this JavaScript that will do it automatically, when the story starts. Just put this in a passage tagged with "script".

(function(){var r="";var s=Wikifier.formatters;for(var i=0;i < s.length;i++){if(s[i].name=="image"){r=s[i].lookahead;break;}}var div=$("storeArea").firstChild;while(div){if(r){k(new RegExp(r,"mg"),4);}var b=String.fromCharCode(92);var re="url"+b+"("+b+"s*['"+'"]?(.*?)'+"['"+'"]?'+b+"s*"+b+")";k(new RegExp(re,"mg"),1);div=div.nextSibling;}function k(c,e){do{d=c.exec(div.innerHTML);if(d){var i=new Image();i.src=d[e];}}while(d);}}());

This will work for images set using the "img" markup in Twine, but not images that are in HTML img tags.

Update 12/2/13: This will now also preload images used in CSS url( ... ) values. It will search for such values in every passage, include the stylesheet passages, script passages, and inline JavaScript.

Version history:

  1. 12/2/13 - Now preloads images specified by CSS URL values too.
  2. 19/1/13 - Initial.