Home › Development Diaries › L's blog

Revision of Twine: preloading images from Tue, 02/12/2013 - 07:40

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="visibility:hidden; width:0px; height:0px;" >
...
</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 only work for images set using the "img" markup in Twine - images in HTML blocks won't be included.

Version history:

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