mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-08-18 22:41:49 +02:00
improved lazy loading
This commit is contained in:
Pomax
@@ -1,11 +1,11 @@
|
||||
let curve, r;
|
||||
let curve, r, kappa = 0.5519768352769461;
|
||||
|
||||
setup() {
|
||||
r = 100;
|
||||
curve = new Bezier(this, [
|
||||
{ x: r, y: 0 },
|
||||
{ x: r, y: 0.55228 * r },
|
||||
{ x: 0.55228 * r, y: r},
|
||||
{ x: r, y: kappa * r },
|
||||
{ x: kappa * r, y: r},
|
||||
{ x: 0, y: r }
|
||||
]);
|
||||
}
|
||||
@@ -38,12 +38,12 @@ draw() {
|
||||
curve.drawCurve(`#CC00CC40`);
|
||||
|
||||
setColor(`#CC00CC`);
|
||||
line(r, 0, r, -0.55228 * r);
|
||||
circle(r, -0.55228 * r, 2);
|
||||
text(`reflected`, r + 7, -0.55228 * r + 3, LEFT);
|
||||
line(r, 0, r, -kappa * r);
|
||||
circle(r, -kappa * r, 2);
|
||||
text(`reflected`, r + 7, -kappa * r + 3, LEFT);
|
||||
|
||||
setColor(`#CC00CC40`);
|
||||
line(0, -r, 0.55228 * r, -r);
|
||||
line(0, -r, kappa * r, -r);
|
||||
|
||||
curve.points.forEach(p => {
|
||||
p.x = -p.x;
|
||||
@@ -52,12 +52,12 @@ draw() {
|
||||
curve.drawCurve(`#0000CC40`);
|
||||
|
||||
setColor(`#0000CC`);
|
||||
line(0, r, -0.55228 * r, r);
|
||||
circle(-0.55228 * r, r, 2);
|
||||
text(`reflected`, -0.55228 * r - 5, r + 3, RIGHT);
|
||||
line(0, r, -kappa * r, r);
|
||||
circle(-kappa * r, r, 2);
|
||||
text(`reflected`, -kappa * r - 5, r + 3, RIGHT);
|
||||
|
||||
setColor(`#0000CC40`);
|
||||
line(-r, 0, -r, 0.55228 * r);
|
||||
line(-r, 0, -r, kappa * r);
|
||||
|
||||
curve.points.forEach(p => p.y = -p.y);
|
||||
curve.drawCurve(`#00000040`);
|
||||
|
||||
@@ -47,13 +47,13 @@ But we now need to find two control points, rather than one. If we want the deri
|
||||
C_1 = S + a \cdot \begin{pmatrix} 0 \\ 1 \end{pmatrix}
|
||||
\]
|
||||
|
||||
where "a" is some scaling factor, and:
|
||||
where "a" is some scaling factor we'll need to find the expression for, and:
|
||||
|
||||
\[
|
||||
C_2 = E + b \cdot \begin{pmatrix} -sin(φ) \\ cos(φ) \end{pmatrix}
|
||||
C_2 = E + a \cdot \begin{pmatrix} sin(φ) \\ cos(φ) \end{pmatrix}
|
||||
\]
|
||||
|
||||
where "b" is also some scaling factor.
|
||||
using the same scaling factor, because circular arcs are symmetrical, so our approximation will need to be symmetrical, too.
|
||||
|
||||
Starting with this information, we slowly maths our way to success, but I won't lie: the maths for this is pretty trig-heavy, and it's easy to get lost if you remember (or know!) some of the core trigonometric identities, so if you just want to see the final result just skip past the next section!
|
||||
|
||||
@@ -121,7 +121,10 @@ And after this tedious detour to find the coordinate for C<sub>1</sub>, we can f
|
||||
|
||||
\[
|
||||
\begin{array}{l}
|
||||
E'_x = -sin(φ) \ , \ E'_y = cos(φ) \ , \ ||E'|| = \sqrt{ (-sin(φ))^2 + cos^2(φ)} = 1 \ , \\
|
||||
E'_x = -sin(φ) \ ,\\
|
||||
E'_y = cos(φ) \ , \\
|
||||
||E'|| = \sqrt{ (-sin(φ))^2 + cos^2(φ)} = 1 \ , \\
|
||||
\\
|
||||
\left\{\begin{array}{l}
|
||||
C_2x = E_x - C_{1y} \cdot \frac{E_x'}{||E'||}
|
||||
= cos(φ) + C_{1y} \cdot sin(φ)
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 29 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 20 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 10 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 24 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 22 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 83 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 20 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 17 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 9.8 KiB After Width: | Height: | Size: 11 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 25 KiB |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="113px" height="40" viewBox="0 0 85 30"><svg overflow="visible" x="-.214" y="18.067"><path d="M7.781-8.219c-.922-.344-1.593-.484-2.328-.484-.984 0-2.078.344-2.906.89C1.14-6.859.39-5.358.39-3.53c0 2.328 1.421 3.75 3.703 3.75C5.25.219 6.187-.094 7.28-.844l.157-.578-.266-.187c-1.234.765-1.75.921-2.672.921-1.89 0-2.781-1.015-2.781-3.14 0-1.328.375-2.406 1.11-3.156.546-.563 1.218-.829 2.171-.829.86 0 1.36.141 2 .547v1.063h.578c.078-.813.172-1.328.36-1.953zm0 0"/></svg><svg overflow="visible" x="7.76" y="20.841"><path d="M4.266-.11V-.5l-.657-.031c-.515-.031-.468.015-.468-.453v-5.329l-.282-.093c-.625.297-1.312.562-2.375.906l.11.594h.234l1.25-.516.031-.016c.047 0-.078-.046-.078.172v4.282c0 .468.047.421-.469.453L.86-.5v.531L2.594 0l1.672.031zm0 0"/></svg><svg overflow="visible" x="16.578" y="18.067"><path d="M8.266-4.078a1.419 1.419 0 01-.047-.36c0-.109.015-.234.062-.484h-7.5c.063.25.063.375.063.484 0 .125 0 .235-.063.5h7.5zm0 2.625a1.332 1.332 0 01-.047-.36c0-.109.015-.234.062-.484h-7.5c.063.25.063.375.063.485 0 .125 0 .25-.063.5h7.5zm0 0"/></svg><svg overflow="visible" x="28.976" y="18.067"><path d="M6.14-8.266c-.546-.28-1.093-.437-1.671-.437-.89 0-1.89.406-2.532 1.047-.5.5-.796 1.187-.796 1.89 0 1.016.609 1.72 1.609 1.954l1.14.28c.657.157.813.423.813 1.11C4.703-1.266 4-.625 2.766-.625c-.641 0-1-.11-1.485-.453v-1.234H.656A18.215 18.215 0 01.344-.297C.984.031 1.719.22 2.359.22c1.844 0 3.563-1.516 3.563-3.14 0-.954-.64-1.579-1.844-1.845l-.781-.171C2.516-5.11 2.28-5.423 2.28-6.204c0-1.047.672-1.656 1.766-1.656.594 0 .875.109 1.203.453v.984h.625c.047-.781.14-1.234.328-1.797zm0 0"/></svg><svg overflow="visible" x="38.289" y="18.067"><path d="M8.266-2.766a1.332 1.332 0 01-.047-.359c0-.11.015-.234.062-.484h-3.25v-3.266c-.25.063-.375.078-.484.078-.125 0-.25-.016-.5-.078v3.266H.78c.063.25.063.375.063.484 0 .125 0 .25-.063.5h3.266V.641c.25-.063.375-.079.5-.079.11 0 .234.016.484.079v-3.266h3.25zm0 0"/></svg><svg overflow="visible" x="50.029" y="18.067"><path d="M4.984-1.14l-.156-.485c-.25.203-.266.219-.328.266-.375.312-.453.39-.625.39-.125 0-.047.031-.047-.156 0-.047 0-.078.016-.125l1.11-4.578-.25-.203-.438.218c-.438-.156-.672-.218-.985-.218-.344 0-.578.062-.906.218-.75.375-1.234.766-1.531 1.36l-.047.094C.28-3.297-.093-1.875-.093-.922c0 .516.327 1.047.546 1.047.25 0 .797-.281 1.234-.656.516-.453.985-1.016 1.641-1.938l-.234-.094-.344 1.516a2.715 2.715 0 00-.078.61c0 .265.25.562.437.562.266 0 .86-.36 1.891-1.219zM3.672-5.079c-.266 1.281-.453 1.797-.844 2.406C2.156-1.656 1.516-.969 1.125-.969c-.14 0-.078-.015-.078-.344 0-.765.297-2.093.719-3.093.296-.688.453-.766 1.03-.766.282 0 .5.047.86.172zm0 0"/></svg><svg overflow="visible" x="57.991" y="18.067"><path d="M2.516-3.125c0-.422-.407-.844-.844-.844-.422 0-.86.422-.86.844 0 .438.438.86.86.86.437 0 .844-.422.844-.86zm0 0"/></svg><svg overflow="visible" x="63.992" y="18.067"><path d="M7.063-17.313c-.063-.046-.125-.093-.188-.156-.063-.047-.11-.11-.219-.312C3.47-14.594 1.563-10.328 1.563-5.5v4.766c0 4.828 1.906 9.093 5.093 12.28.11-.202.157-.265.219-.327.063-.047.125-.11.313-.203C4.14 7.953 2.796 3.89 2.796-.734V-5.5c0-4.64 1.344-8.688 4.39-11.766zm0 0"/></svg><svg overflow="visible" x="72.119" y="10.745"><path d="M5.688-4.5c0-2.625-.907-4-2.547-4C1.297-8.5.203-6.89.203-4c0 1.39.281 2.703.703 3.281.422.594 1.203.953 1.938.953 1.812 0 2.844-1.687 2.844-4.734zm-1.282.594C4.406-1.36 4.094-.437 3-.437c-1.156 0-1.516-1.079-1.516-4 0-2.516.313-3.375 1.438-3.375 1.172 0 1.484 1.03 1.484 3.906zm0 0"/></svg><svg overflow="visible" x="72.119" y="25.19"><path d="M5.125-.094v-.484l-.75-.047c-.656-.031-.64-.031-.64-.656v-7.172l-.313-.125c-.875.469-1.61.781-2.86 1.219l.125.718h.235l1.547-.687.031-.016c.063 0-.047-.015-.047.266v5.797c0 .625.016.625-.64.656L1-.578v.625L3.125 0l2 .047zm0 0"/></svg><svg overflow="visible" x="78.096" y="18.067"><path d="M6.531-.734V-5.5c0-4.828-1.875-9.094-5.078-12.281-.11.203-.156.265-.219.312-.062.063-.125.11-.312.203 3.062 3.078 4.39 7.125 4.39 11.766v4.766c0 4.625-1.328 8.687-4.39 11.75.187.093.25.156.312.203.063.062.11.125.22.328C4.655 8.359 6.53 4.094 6.53-.734zm0 0"/></svg></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="117px" height="40" viewBox="0 0 88 30"><svg overflow="visible" x="-.475" y="18.067"><path d="M9.281-8.438c0-.03-.219-.25-.328-.25a.701.701 0 00-.328.172l-.672.75c0 .016-.672-.921-2-.921-2.672 0-5.562 2.765-5.562 5.546C.39-1.17 2.016.266 3.844.266c1.031 0 2.078-.516 2.703-1.063C7.657-1.78 7.922-2.969 7.922-3c0-.125-.203-.031-.203-.031l-.125-.219c-.078 0-.344.156-.36.25-.109.344-.328 1.094-1.156 1.797-.812.672-1.422.828-2.047.828-1.078 0-2.156-.484-2.156-2.344 0-.687.188-2.531 1.39-3.922C4-7.5 4.986-8.062 6.048-8.062c1.219 0 1.719.796 1.719 2.187 0 .469-.032.484-.032.61 0 .109.329.25.375.25.157 0 .36-.157.407-.376zm0 0"/></svg><svg overflow="visible" x="8.073" y="21.021"><path d="M4.172-.156v-.469H3.64c-.829 0-.625.063-.625-.219v-4.64c0-.235-.235-.391-.563-.391-.578.578-1.203.531-1.75.531v.625c.406 0 1.11-.047 1.219-.11v3.985c0 .281.203.219-.625.219H.766v.64L2.469-.03l1.703.047zm0 0"/></svg><svg overflow="visible" x="16.654" y="18.067"><path d="M8.828-4.281c0-.125-.312-.375-.437-.375H.906c-.125 0-.437.25-.437.375 0 .14.312.375.437.375h7.485c.125 0 .437-.235.437-.375zm0 2.328c0-.14-.312-.375-.437-.375H.906c-.125 0-.437.234-.437.375 0 .125.312.36.437.36h7.485c.125 0 .437-.235.437-.36zm0 0"/></svg><svg overflow="visible" x="29.267" y="18.067"><path d="M7.906-8.438c0-.03-.218-.25-.328-.25-.062 0-.219.047-.36.22L6.814-8c-.204-.36-.954-.688-1.735-.688-1.516 0-3.156 1.5-3.156 2.954 0 .968.844 1.64 1.453 1.828l1.281.328c.438.11.89.156.89 1.14 0 1.079-.78 2.063-1.952 2.063-.766 0-1.89-.125-1.89-1.61 0-.28.046-.577.062-.64.015-.047-.032 0-.032 0l.063-.094c0-.11-.281-.25-.344-.25a.857.857 0 00-.266.078C1.141-2.844.422-.03.422.016c0 .062.266.25.328.25.063 0 .203-.047.344-.22l.453-.5c.375.516 1.328.72 2.031.72 1.625 0 3.219-1.72 3.219-3.204a2.09 2.09 0 00-.64-1.5c-.282-.265-.595-.359-1.657-.625l-.797-.218c-.328-.11-.531-.328-.531-.953 0-.97.765-1.86 1.89-1.86 1 0 1.532.39 1.532 1.719 0 .39-.063.61-.063.672l.344.094s-.14.156.016.156c.109 0 .312-.172.359-.375zm0 0"/></svg><svg overflow="visible" x="39.979" y="18.067"><path d="M8.828-3.125c0-.125-.312-.36-.437-.36H5.078v-3.374c0-.141-.297-.375-.422-.375-.14 0-.453.234-.453.375v3.375H.906c-.125 0-.437.234-.437.359 0 .14.312.375.437.375h3.297V.625c0 .125.313.36.453.36.125 0 .422-.235.422-.36V-2.75h3.313c.125 0 .437-.234.437-.375zm0 0"/></svg><svg overflow="visible" x="51.934" y="18.067"><path d="M6.14-1.844c0-.11-.296-.25-.327-.25-.125 0-.344.188-.375.344-.204.781-.22 1.36-.704 1.36-.328 0-.171-.188-.171-.422 0-.266.03-.36.156-.891l.265-1.063.438-1.687c.078-.328.078-.36.078-.406 0-.204-.344-.454-.547-.454-.281 0-.656.407-.703.657h.406c-.218-.438-.765-.89-1.297-.89-1.406 0-3.078 1.89-3.078 3.64 0 1.125.86 2.031 1.781 2.031.25 0 .97-.078 1.422-.61.032.094.657.61 1.22.61.421 0 .827-.297 1.015-.688l.062-.093c.203-.438.297-1.094.297-1.094zm-2.03-2.25c0 .063-.016.14-.032.203l-.594 2.344c-.062.203 0 .14-.187.344-.531.656-.875.812-1.203.812-.594 0-.578-.53-.578-1 0-.593.328-1.968.593-2.515.375-.703.782-1.11 1.266-1.11.766 0 .734.844.734.922zm0 0"/></svg><svg overflow="visible" x="60.912" y="18.067"><path d="M2.484-3.125c0-.344-.468-.766-.828-.766-.343 0-.828.422-.828.766 0 .36.485.766.828.766.36 0 .828-.407.828-.766zm0 0"/></svg><svg overflow="visible" x="66.89" y="18.067"><path d="M8.344 10.969a.486.486 0 00-.14-.266C5.655 8.781 3.936 3.578 3.936-.89v-4.453c0-4.484 1.72-9.687 4.266-11.593a.486.486 0 00.14-.266c0-.11-.28-.344-.405-.344-.047 0-.235.063-.282.078-2.64 2-5.156 7.422-5.156 12.125V-.89c0 4.688 2.516 10.125 5.156 12.11a.993.993 0 00.282.094c.125 0 .406-.235.406-.344zm0 0"/></svg><svg overflow="visible" x="75.698" y="10.745"><path d="M5.688-3.953c0-.953-.063-1.922-.47-2.797-.562-1.156-1.734-1.469-2.234-1.469-.718 0-1.796.438-2.28 1.547-.376.828-.438 1.766-.438 2.719 0 .89.109 2.062.593 2.969.516.968 1.532 1.25 2.11 1.25.656 0 1.75-.391 2.281-1.516.375-.828.438-1.766.438-2.703zm-1.391-.14c0 .89 0 1.702-.125 2.468C4-.485 3.516-.265 2.969-.265 2.516-.266 2-.438 1.78-1.579c-.125-.719-.125-1.813-.125-2.516 0-.765 0-1.562.094-2.203.219-1.422.922-1.406 1.219-1.406.406 0 .984.094 1.219 1.266.109.671.109 1.578.109 2.343zm0 0"/></svg><svg overflow="visible" x="75.698" y="25.19"><path d="M5.203-.125v-.516h-.578c-1.078 0-.922 0-.922-.437v-6.703c0-.282-.187-.438-.578-.438-.766.797-1.672.766-2.266.766v.625c.438 0 1.282-.031 1.563-.172v5.922c0 .437.172.437-.906.437H.937v.672C1.547-.03 2.595-.03 3.079-.03c.469 0 1.516 0 2.125.062zm0 0"/></svg><svg overflow="visible" x="81.676" y="18.067"><path d="M6.281-.89v-4.454c0-4.703-2.5-10.125-5.156-12.125a1.32 1.32 0 00-.266-.078c-.125 0-.421.235-.421.344 0 .078.093.234.14.265 2.547 1.907 4.266 7.11 4.266 11.594V-.89c0 4.47-1.719 9.672-4.266 11.594a.486.486 0 00-.14.266c0 .11.296.344.421.344a.77.77 0 00.266-.094C3.781 9.234 6.281 3.797 6.281-.891zm0 0"/></svg></svg>
|
||||
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.8 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 12 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 9.6 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 34 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 11 KiB |
@@ -59,7 +59,7 @@
|
||||
<link rel="stylesheet" href="./js/custom-element/graphics-element.css" />
|
||||
|
||||
<!-- make images lazy load much earlier -->
|
||||
<script src="./js/site/faster-lazy-loading.js" type="module" async defer></script>
|
||||
<script src="./js/site/better-lazy-loading.js" type="module" async defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -5344,7 +5344,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/a4f0dafbfe80c88723c3cc22277a9682.svg"
|
||||
width="175px"
|
||||
width="189px"
|
||||
height="40px"
|
||||
loading="lazy"
|
||||
/>
|
||||
@@ -5356,19 +5356,19 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/dfb83eec053c30e0a41b0a52aba24cd4.svg"
|
||||
width="113px"
|
||||
width="117px"
|
||||
height="40px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>where "a" is some scaling factor, and:</p>
|
||||
<p>where "a" is some scaling factor we'll need to find the expression for, and:</p>
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/e75a848f5f8aead495e35175e2955e06.svg"
|
||||
width="163px"
|
||||
src="./images/chapters/circles_cubic/14c238eb17045cda3205c6ce9944004c.svg"
|
||||
width="157px"
|
||||
height="40px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>where "b" is also some scaling factor.</p>
|
||||
<p>using the same scaling factor, because circular arcs are symmetrical, so our approximation will need to be symmetrical, too.</p>
|
||||
<p>
|
||||
Starting with this information, we slowly maths our way to success, but I won't lie: the maths for this is pretty trig-heavy, and it's
|
||||
easy to get lost if you remember (or know!) some of the core trigonometric identities, so if you just want to see the final result just
|
||||
@@ -5401,8 +5401,8 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/3189cac1ddac07c1487e1e51740ecc88.svg"
|
||||
width="397px"
|
||||
height="40px"
|
||||
width="408px"
|
||||
height="36px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>
|
||||
@@ -5413,8 +5413,8 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/fe32474b4616ee9478e1308308f1b6bf.svg"
|
||||
width="188px"
|
||||
height="32px"
|
||||
width="197px"
|
||||
height="31px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>
|
||||
@@ -5424,8 +5424,8 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/0364731626a530c8a9b30f424ada53c5.svg"
|
||||
width="261px"
|
||||
height="67px"
|
||||
width="267px"
|
||||
height="59px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>
|
||||
@@ -5435,15 +5435,15 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/ee08d86b7497c7ab042ee899bf15d453.svg"
|
||||
width="397px"
|
||||
height="48px"
|
||||
width="403px"
|
||||
height="43px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/195790bae7de813aec342ea82b5d8781.svg"
|
||||
width="211px"
|
||||
height="47px"
|
||||
width="223px"
|
||||
height="41px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>
|
||||
@@ -5453,8 +5453,8 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/178a838274748439778e2a29f5a27d0b.svg"
|
||||
width="252px"
|
||||
height="56px"
|
||||
width="259px"
|
||||
height="52px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>
|
||||
@@ -5463,9 +5463,9 @@ for p = 1 to points.length-3 (inclusive):
|
||||
</p>
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/49dbf244d50c787a4ab18694488d9b69.svg"
|
||||
width="524px"
|
||||
height="79px"
|
||||
src="./images/chapters/circles_cubic/1ab9827727b8f7fe466a124b0e1867ce.svg"
|
||||
width="547px"
|
||||
height="131px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>And that's it, we have all four points now for an approximation of an arbitrary circular arc with angle φ.</p>
|
||||
@@ -5475,7 +5475,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/e2258660a796dcd6189a6f5e14326dad.svg"
|
||||
width="205px"
|
||||
width="216px"
|
||||
height="40px"
|
||||
loading="lazy"
|
||||
/>
|
||||
@@ -5483,7 +5483,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/acbc5efb06bc34571ccc0322376e0b9b.svg"
|
||||
width="321px"
|
||||
width="339px"
|
||||
height="40px"
|
||||
loading="lazy"
|
||||
/>
|
||||
@@ -5494,15 +5494,15 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/877f9c217c51c0087be751a7580ed459.svg"
|
||||
width="412px"
|
||||
height="33px"
|
||||
width="420px"
|
||||
height="25px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>Which, in decimal values, rounded to six significant digits, is:</p>
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/05d36e051a38905dcb81e65db8261f24.svg"
|
||||
width="412px"
|
||||
width="427px"
|
||||
height="16px"
|
||||
loading="lazy"
|
||||
/>
|
||||
@@ -5513,7 +5513,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<graphics-element title="Cubic Bézier circle approximation" width="340" height="300" src="./chapters/circles_cubic/circle.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="340px" height="300px" src="images\chapters\circles_cubic\8676cce0d4394ae095c7e50be1238aa0.png" />
|
||||
<img width="340px" height="300px" src="images\chapters\circles_cubic\63f35fb58d3571200ac6ccea0384b9d7.png" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
</section>
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
<link rel="stylesheet" href="./js/custom-element/graphics-element.css" />
|
||||
|
||||
<!-- make images lazy load much earlier -->
|
||||
<script src="./js/site/faster-lazy-loading.js" type="module" async defer></script>
|
||||
<script src="./js/site/better-lazy-loading.js" type="module" async defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -5179,7 +5179,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/a4f0dafbfe80c88723c3cc22277a9682.svg"
|
||||
width="175px"
|
||||
width="189px"
|
||||
height="40px"
|
||||
loading="lazy"
|
||||
/>
|
||||
@@ -5191,19 +5191,19 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/dfb83eec053c30e0a41b0a52aba24cd4.svg"
|
||||
width="113px"
|
||||
width="117px"
|
||||
height="40px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>where "a" is some scaling factor, and:</p>
|
||||
<p>where "a" is some scaling factor we'll need to find the expression for, and:</p>
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/e75a848f5f8aead495e35175e2955e06.svg"
|
||||
width="163px"
|
||||
src="./images/chapters/circles_cubic/14c238eb17045cda3205c6ce9944004c.svg"
|
||||
width="157px"
|
||||
height="40px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>where "b" is also some scaling factor.</p>
|
||||
<p>using the same scaling factor, because circular arcs are symmetrical, so our approximation will need to be symmetrical, too.</p>
|
||||
<p>
|
||||
Starting with this information, we slowly maths our way to success, but I won't lie: the maths for this is pretty trig-heavy, and it's
|
||||
easy to get lost if you remember (or know!) some of the core trigonometric identities, so if you just want to see the final result just
|
||||
@@ -5236,8 +5236,8 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/3189cac1ddac07c1487e1e51740ecc88.svg"
|
||||
width="397px"
|
||||
height="40px"
|
||||
width="408px"
|
||||
height="36px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>
|
||||
@@ -5248,8 +5248,8 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/fe32474b4616ee9478e1308308f1b6bf.svg"
|
||||
width="188px"
|
||||
height="32px"
|
||||
width="197px"
|
||||
height="31px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>
|
||||
@@ -5259,8 +5259,8 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/0364731626a530c8a9b30f424ada53c5.svg"
|
||||
width="261px"
|
||||
height="67px"
|
||||
width="267px"
|
||||
height="59px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>
|
||||
@@ -5270,15 +5270,15 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/ee08d86b7497c7ab042ee899bf15d453.svg"
|
||||
width="397px"
|
||||
height="48px"
|
||||
width="403px"
|
||||
height="43px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/195790bae7de813aec342ea82b5d8781.svg"
|
||||
width="211px"
|
||||
height="47px"
|
||||
width="223px"
|
||||
height="41px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>
|
||||
@@ -5288,8 +5288,8 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/178a838274748439778e2a29f5a27d0b.svg"
|
||||
width="252px"
|
||||
height="56px"
|
||||
width="259px"
|
||||
height="52px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>
|
||||
@@ -5298,9 +5298,9 @@ for p = 1 to points.length-3 (inclusive):
|
||||
</p>
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/49dbf244d50c787a4ab18694488d9b69.svg"
|
||||
width="524px"
|
||||
height="79px"
|
||||
src="./images/chapters/circles_cubic/1ab9827727b8f7fe466a124b0e1867ce.svg"
|
||||
width="547px"
|
||||
height="131px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>And that's it, we have all four points now for an approximation of an arbitrary circular arc with angle φ.</p>
|
||||
@@ -5310,7 +5310,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/e2258660a796dcd6189a6f5e14326dad.svg"
|
||||
width="205px"
|
||||
width="216px"
|
||||
height="40px"
|
||||
loading="lazy"
|
||||
/>
|
||||
@@ -5318,7 +5318,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/acbc5efb06bc34571ccc0322376e0b9b.svg"
|
||||
width="321px"
|
||||
width="339px"
|
||||
height="40px"
|
||||
loading="lazy"
|
||||
/>
|
||||
@@ -5329,15 +5329,15 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/877f9c217c51c0087be751a7580ed459.svg"
|
||||
width="412px"
|
||||
height="33px"
|
||||
width="420px"
|
||||
height="25px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>Which, in decimal values, rounded to six significant digits, is:</p>
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/05d36e051a38905dcb81e65db8261f24.svg"
|
||||
width="412px"
|
||||
width="427px"
|
||||
height="16px"
|
||||
loading="lazy"
|
||||
/>
|
||||
@@ -5348,7 +5348,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<graphics-element title="Cubic Bézier circle approximation" width="340" height="300" src="./chapters/circles_cubic/circle.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="340px" height="300px" src="images\chapters\circles_cubic\8676cce0d4394ae095c7e50be1238aa0.png" />
|
||||
<img width="340px" height="300px" src="images\chapters\circles_cubic\63f35fb58d3571200ac6ccea0384b9d7.png" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
</section>
|
||||
|
||||
38
docs/js/site/better-lazy-loading.js
Normal file
38
docs/js/site/better-lazy-loading.js
Normal file
@@ -0,0 +1,38 @@
|
||||
/**
|
||||
* This file takes any <img> with loading="lazy" and rewrites it
|
||||
* so that it starts to load much earlier than browsers would load
|
||||
* them, so that they're already done by the time the user gets to
|
||||
* them. This (mostly) prevents the whole "you can see the image
|
||||
* loading in", which is super shitty UX.
|
||||
*/
|
||||
|
||||
const images = Array.from(
|
||||
document.querySelectorAll(`img.LaTeX.SVG[loading=lazy]`)
|
||||
);
|
||||
|
||||
// Deactivate the images
|
||||
images.forEach((img) => {
|
||||
img.dataset.src = img.src;
|
||||
img.src = ``;
|
||||
img.removeAttribute(`loading`);
|
||||
});
|
||||
|
||||
// Then make their activation conditional on whether
|
||||
// they're close to being on-screen or not.
|
||||
let observer = new IntersectionObserver(
|
||||
function (entries) {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
img.src = img.dataset.src;
|
||||
const pos = images.indexOf(img);
|
||||
images.splice(pos, 1);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ rootMargin: `100%` }
|
||||
);
|
||||
|
||||
images.forEach((image) => {
|
||||
observer.observe(image);
|
||||
});
|
||||
@@ -1,17 +1,13 @@
|
||||
const comments = document.getElementById(`disqus_thread`);
|
||||
|
||||
document.addEventListener("scroll", scrollHandler, { passive: true });
|
||||
|
||||
function scrollHandler() {
|
||||
var bbox = comments.getBoundingClientRect();
|
||||
var top = bbox.top;
|
||||
var limit = window.innerHeight;
|
||||
if (top < limit) {
|
||||
loadDisqus();
|
||||
}
|
||||
}
|
||||
new IntersectionObserver(function (entries) {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
loadDisqus();
|
||||
}
|
||||
});
|
||||
}).observe(document.getElementById(`disqus_thread`));
|
||||
|
||||
let loadDisqus = () => {
|
||||
loadDisqus = () => {};
|
||||
console.log(`loading Disqus comments`);
|
||||
|
||||
globalThis.disqus_config = function () {
|
||||
@@ -24,9 +20,4 @@ let loadDisqus = () => {
|
||||
script.async = true;
|
||||
script.setAttribute("data-timestamp", Date.now());
|
||||
document.head.appendChild(script);
|
||||
|
||||
loadDisqus = () => {};
|
||||
document.removeEventListener("scroll", scrollHandler);
|
||||
};
|
||||
|
||||
scrollHandler();
|
||||
|
||||
@@ -1,77 +0,0 @@
|
||||
/**
|
||||
* This file takes any <img> with loading="lazy" and rewrites it
|
||||
* so that it starts to load much earlier than browsers would load
|
||||
* them, so that they're already done by the time the user gets to
|
||||
* them. This prevents the ridiculous "don't start loading the img
|
||||
* until we're already looking at the empty bounding box".
|
||||
*/
|
||||
|
||||
const images = Array.from(
|
||||
document.querySelectorAll(`img.LaTeX.SVG[loading=lazy]`)
|
||||
);
|
||||
|
||||
// First, make images inert. As this happens before the document
|
||||
// becomes active, this prevents images from loading anything.
|
||||
//
|
||||
// Also, by having JS deactivate the images, anyone running with
|
||||
// JS disabled will still see images load in properly. In fact,
|
||||
// the "lazy" attribute gets ignored when JS is disabled and all
|
||||
// images will just load in immediately.
|
||||
|
||||
images.forEach((img) => {
|
||||
// non-negotiable order of operations:
|
||||
img.dataset.src = img.src;
|
||||
img.src = ``;
|
||||
img.removeAttribute(`loading`);
|
||||
});
|
||||
|
||||
// Then tack on the functionality that reactivates them based on viewport distance.
|
||||
|
||||
let lock = false;
|
||||
let retry = false;
|
||||
|
||||
/**
|
||||
* Test all images during scroll, in a way that doesn't hang the browser.
|
||||
*/
|
||||
function testImages() {
|
||||
if (lock) {
|
||||
if (retry) retry = clearTimeout(retry);
|
||||
retry = setTimeout(testImages, 200);
|
||||
}
|
||||
|
||||
lock = true;
|
||||
|
||||
let height = document.documentElement.clientHeight;
|
||||
|
||||
for (let pos = images.length - 1; pos >= 0; pos--) {
|
||||
test(images[pos], pos, height);
|
||||
}
|
||||
|
||||
if (images.length === 0) {
|
||||
window.removeEventListener("scroll", testImages);
|
||||
if (retry) clearTimeout(retry);
|
||||
}
|
||||
|
||||
lock = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Test individual images for whether or not they should load.
|
||||
*/
|
||||
function test(img, pos, height) {
|
||||
let top = img.getBoundingClientRect().top;
|
||||
top = top < height;
|
||||
|
||||
let bottom = img.getBoundingClientRect().bottom;
|
||||
bottom = bottom > -height;
|
||||
|
||||
if (top || bottom) {
|
||||
img.src = img.dataset.src;
|
||||
images.splice(pos, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Remember to listen for scroll passively. If you don't, bad things happen.
|
||||
*/
|
||||
window.addEventListener("scroll", testImages, { passive: true });
|
||||
@@ -60,7 +60,7 @@
|
||||
<link rel="stylesheet" href="./js/custom-element/graphics-element.css" />
|
||||
|
||||
<!-- make images lazy load much earlier -->
|
||||
<script src="./js/site/faster-lazy-loading.js" type="module" async defer></script>
|
||||
<script src="./js/site/better-lazy-loading.js" type="module" async defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -5151,7 +5151,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/a4f0dafbfe80c88723c3cc22277a9682.svg"
|
||||
width="175px"
|
||||
width="189px"
|
||||
height="40px"
|
||||
loading="lazy"
|
||||
/>
|
||||
@@ -5163,19 +5163,19 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/dfb83eec053c30e0a41b0a52aba24cd4.svg"
|
||||
width="113px"
|
||||
width="117px"
|
||||
height="40px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>where "a" is some scaling factor, and:</p>
|
||||
<p>where "a" is some scaling factor we'll need to find the expression for, and:</p>
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/e75a848f5f8aead495e35175e2955e06.svg"
|
||||
width="163px"
|
||||
src="./images/chapters/circles_cubic/14c238eb17045cda3205c6ce9944004c.svg"
|
||||
width="157px"
|
||||
height="40px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>where "b" is also some scaling factor.</p>
|
||||
<p>using the same scaling factor, because circular arcs are symmetrical, so our approximation will need to be symmetrical, too.</p>
|
||||
<p>
|
||||
Starting with this information, we slowly maths our way to success, but I won't lie: the maths for this is pretty trig-heavy, and it's
|
||||
easy to get lost if you remember (or know!) some of the core trigonometric identities, so if you just want to see the final result just
|
||||
@@ -5208,8 +5208,8 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/3189cac1ddac07c1487e1e51740ecc88.svg"
|
||||
width="397px"
|
||||
height="40px"
|
||||
width="408px"
|
||||
height="36px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>
|
||||
@@ -5220,8 +5220,8 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/fe32474b4616ee9478e1308308f1b6bf.svg"
|
||||
width="188px"
|
||||
height="32px"
|
||||
width="197px"
|
||||
height="31px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>
|
||||
@@ -5231,8 +5231,8 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/0364731626a530c8a9b30f424ada53c5.svg"
|
||||
width="261px"
|
||||
height="67px"
|
||||
width="267px"
|
||||
height="59px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>
|
||||
@@ -5242,15 +5242,15 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/ee08d86b7497c7ab042ee899bf15d453.svg"
|
||||
width="397px"
|
||||
height="48px"
|
||||
width="403px"
|
||||
height="43px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/195790bae7de813aec342ea82b5d8781.svg"
|
||||
width="211px"
|
||||
height="47px"
|
||||
width="223px"
|
||||
height="41px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>
|
||||
@@ -5260,8 +5260,8 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/178a838274748439778e2a29f5a27d0b.svg"
|
||||
width="252px"
|
||||
height="56px"
|
||||
width="259px"
|
||||
height="52px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>
|
||||
@@ -5270,9 +5270,9 @@ for p = 1 to points.length-3 (inclusive):
|
||||
</p>
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/49dbf244d50c787a4ab18694488d9b69.svg"
|
||||
width="524px"
|
||||
height="79px"
|
||||
src="./images/chapters/circles_cubic/1ab9827727b8f7fe466a124b0e1867ce.svg"
|
||||
width="547px"
|
||||
height="131px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>And that's it, we have all four points now for an approximation of an arbitrary circular arc with angle φ.</p>
|
||||
@@ -5282,7 +5282,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/e2258660a796dcd6189a6f5e14326dad.svg"
|
||||
width="205px"
|
||||
width="216px"
|
||||
height="40px"
|
||||
loading="lazy"
|
||||
/>
|
||||
@@ -5290,7 +5290,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/acbc5efb06bc34571ccc0322376e0b9b.svg"
|
||||
width="321px"
|
||||
width="339px"
|
||||
height="40px"
|
||||
loading="lazy"
|
||||
/>
|
||||
@@ -5301,15 +5301,15 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/877f9c217c51c0087be751a7580ed459.svg"
|
||||
width="412px"
|
||||
height="33px"
|
||||
width="420px"
|
||||
height="25px"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>Which, in decimal values, rounded to six significant digits, is:</p>
|
||||
<img
|
||||
class="LaTeX SVG"
|
||||
src="./images/chapters/circles_cubic/05d36e051a38905dcb81e65db8261f24.svg"
|
||||
width="412px"
|
||||
width="427px"
|
||||
height="16px"
|
||||
loading="lazy"
|
||||
/>
|
||||
@@ -5320,7 +5320,7 @@ for p = 1 to points.length-3 (inclusive):
|
||||
<graphics-element title="Cubic Bézier circle approximation" width="340" height="300" src="./chapters/circles_cubic/circle.js">
|
||||
<fallback-image>
|
||||
<span class="view-source">Scripts are disabled. Showing fallback image.</span>
|
||||
<img width="340px" height="300px" src="images\chapters\circles_cubic\8676cce0d4394ae095c7e50be1238aa0.png" />
|
||||
<img width="340px" height="300px" src="images\chapters\circles_cubic\63f35fb58d3571200ac6ccea0384b9d7.png" />
|
||||
<label></label> </fallback-image
|
||||
></graphics-element>
|
||||
</section>
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
<link rel="stylesheet" href="./js/custom-element/graphics-element.css" />
|
||||
|
||||
<!-- make images lazy load much earlier -->
|
||||
<script src="./js/site/faster-lazy-loading.js" type="module" async defer></script>
|
||||
<script src="./js/site/better-lazy-loading.js" type="module" async defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Reference in New Issue
Block a user