Twine 2, (Sugarcube 2.31.1)
Hi folks,
Twine 2, (Sugarcube 2.31.1)
I’ve been using TME’s pre-loading image function (Javascript + CSS) which has been working really well with absolute image URLS. I’ve just changed to relative URLS and can’t get it to work. Any ideas where I’ve gone wrong?
Here’s my Javascript:
/*PRELOADING IMAGES SO THERE'S LESS DELAY -( JAVASCRIPT)*/
(function () {
var sources = [
"images/cave3.jpg",
"images/cave4.jpg",
"images/dragon.jpg",
"images/dungeon4.jpg",
"images/forestbest.jpg",
"images/forestdark.jpg",
"images/forestwolf.jpg",
"images/lake.jpg",
"images/mountain.jpg",
"images/ruin.jpg",
"images/sewers.jpg",
"images/swamp.jpg",
"images/tower.jpg",
"images/alley2.jpg"
],
docFrag = document.createDocumentFragment(),
imgBox = document.createElement("div");
imgBox.id = "imgloader-box";
docFrag.appendChild(imgBox);
sources.forEach(function (src) {
var image = document.createElement("img");
image.src = src;
imgBox.appendChild(image);
});
document.body.appendChild(docFrag);
}());
/*END PRELOADING IMAGES SO THERE'S LESS DELAY*/
Here’s the partner CSS for the above JAVASCRIPT
#imgloader-box{position:fixed;left:0;top:0;width:2px;height:2px;overflow:hidden;z-index:0}
#imgloader-box img{position:absolute;left:0;top:0;width:1px;height:1px}
And here’s a background image class
body.forest {
background-image: url("images/forestbest.jpg");
background-repeat:no-repeat;
background-attachment: fixed;
background-position: center;
background-size:cover;
margin: 0;
}
So that background image is loading, but it’s loading really slowly. Before when the images were absolute URLS it was basically instant, so I’ve got something wrong somewhere.
Not sure if it’s worth mentioning, but suddenly some of my fonts are not loading properly either, and my text animations are also not working? Don’t know if that’s related, but anyway I’d love to hear your thoughts!