How to load images faster?

Question

I am working with processing.js for my project. When I use loadImage() or requestImage() in the setup, then use those images in draw(), it does not work at all. The image does not show. Even worse is that the program went gray(which means nothing is working)

I tried @pjs as well, but that didn't work. How can I make images load faster?

Answer 1

If you have a lot of images (especially small ones) use BASE64 encoded Data URI scheme to embed them into the HTML page. This will significantly reduce the number of round trips you need to make. You can use this tool to get the exact HTML or CSS from the image.

Bandwidth in most cases (even cellular) is pretty good, what creates more delays now is latency. See Google's recommendation on reducing the number of round trips.

You can also use more CSS sprites.

Answer 2

Does the web console say anything? This sounds like you're not preloading the image and your code executes before it's ready, but without an error it's not certain. Try adding this at the top of your code:

/* @pjs preload="example.jpg"; */

Documentation

If that doesn't work, have a look at the JS console in your browser and see what errors (if any) are printed. You could also include some debugging print statements in your code.