Revision of Twine: preloading images from Mon, 02/11/2013 - 07:36

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:

(Remove the underscores from html tags)
<_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 = ""; for(i = 0; i < Wikifier.formatters.length; i++) { if(Wikifier.formatters[i].name == "image") { r = Wikifier.formatters[i].lookahead; break; } } if(r) { var div = $('storeArea').firstChild; while(div) { var c = new RegExp(r, "mg"); var d = c.exec(div.innerHTML); if(d) { var i = document.createElement('img'); i.setAttribute('src', d[4]); i.setAttribute('style', 'visibility:hidden; width:0px; height:0px;'); document.body.appendChild(i); } div = div.nextSibling; } }}());

This will only work for images set using the "img" markup in Twine - images in HTML blocks won't be included.

pensive-mosquitoes