This is the code that runs https://bandolier.learnjsthehardway.com/ for you to review. It uses the https://git.learnjsthehardway.com/learn-javascript-the-hard-way/bandolier-template to create the documentation for the project.
https://bandolier.learnjsthehardway.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1.2 KiB
1.2 KiB
SnapImage creates a temporary image using SVG that looks kind of like the incoming image, and
when that image finally loads fades it into view. This helps with perceived render speed in the
following ways:
- The aspect ratio of the image is placed before the page loads, reducing or eliminating render shift.
- A block of responsive SVG loads instantly which tricks the browser into fully rendering the whole page making it seem faster.
- The rendered colors look enough like the image for the brief time they're present that people percieve the image as loading faster even when it's not.
By default SnapImage will use a set of random monochrome colors if none are given. You can change the options used to generate the random colors by setting random_options like this:
random_options = {
hue: "monochrome",
"format": "rgbArray",
"luminosity": "random",
count: 10
}
These options come from the randomColor project by davidmerfield which is used in the project for all random color generation.
Generating Image Colors
To generate your own colors there's a tiny script I'm using:
I need to find this code actually. Stay tuned.