I've been coding up some graphically-intense scripts of late, and I've noticed they run a lot more smoothly if I can force players' browsers to load images in advance, before they're toggled on in the sandbox (... which I handle by moving them between the "walls" and "map" layer) or called in a /direct html chat command. I've found Sandbox .webm animations to be particularly important to preload, or they occasionally don't load in at all for my players when I switch the .webm graphic from the walls to the map layer. My Current Solutions I was able to solve this issue for my character sheets fairly cleanly, but preloading sandbox and chat images have proven to be a different matter entirely. For reasons that will soon become apparent, I really don't think the way I'm currently handling this is... ideal, to put it mildly ;) CHAT — I "secretly" load tiny (5px square) versions of every image by hiding them all behind an opacity 0.95 header with a background image fill. I've noticed that it isn't enough to do this once at session start: images will offload after a while (maybe after they scroll up and out of the presented chat history). So, I've taken to hiding the most frequent problem-causers behind every header in this manner. This strikes me as ridiculous, but I haven't noticed any performance issues thus far. (Edit: It occurs to me you might wonder why it's so important to load my images instantly, that I'm going to all this effort to preload them. It's because the height of many of my chat messages depend on the sizes of the images they contain (... which vary, so I can't simply declare a static height style property in advance). If an image doesn't load before the new chat message is positioned in the chat log, the chat message ends up expanding vertically downwards once the image does load, forcing everyone to scroll down the chat log a tiny bit to reveal the entire message.) SANDBOX — I vacillate between two methods, here: The first is by adding "!preload" / "!preload clear" chat commands to my scripts. Running the first iterates through all of my image URLs, createObj()'ing them on the objects layer, and then cycles through all my .webm objects and moves them from "walls" to "map", resizing them as necessary. After waiting a few seconds for all of the images to load in, the second command deletes all the graphic objects (or toggles off the animations). The second is similar to my Chat method: permanently storing small versions of all of the images in an out-of-the-way sandbox location, with an almost-but-not-quite opaque graphic covering them up. Questions The way Roll20 handles graphic objects makes me wonder if my Sandbox methods are helping at all: If I have a graphic that I want loaded in at full size, will preloading a graphic object with the same image url but at a tiny size load in the same image? Or does Roll20 convert between max/med/thumb/etc sizes in the URL automatically depending on the object size? Can I preload Sandbox images/animations in a Chat message? If so, which URL should I use (i.e. whether there's a particular URL I need to use for it to work; whether to use max/med/thumb, etc.)? I'm also not sure how opacity affects the loading of images. Can I still preload images if I place them behind a completely opaque jpeg? Or are browsers smart enough to know that a completely-covered image is one that doesn't have to be loaded? Do my methods strike you as ridiculous, too? Any ideas on less-absurd alternatives would be greatly appreciated :)
