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.
30 lines
1.2 KiB
30 lines
1.2 KiB
2 years ago
|
`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:
|
||
|
|
|
||
|
|
1. The aspect ratio of the image is placed before the page loads, reducing or eliminating render shift.
|
||
|
|
2. A block of responsive SVG loads instantly which tricks the browser into fully rendering the whole page making it seem faster.
|
||
|
|
3. 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](https://github.com/davidmerfield/randomColor) 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:
|
||
|
|
|
||
|
|
<callout class="warning">
|
||
|
|
<span>I need to find this code actually. Stay tuned.</span>
|
||
|
|
</callout>
|