Add lazy loading to video assets

Tue, 27 Sep 2022 14:24:30 -0600

author
Glitchvid <Glitchvid@glitchvid.com>
date
Tue, 27 Sep 2022 14:24:30 -0600
changeset 16
74ef33d9560b
parent 15
4f366832940e
child 17
e3bd2922bf9a

Add lazy loading to video assets

site/features_tools.html file | annotate | diff | comparison | revisions
--- a/site/features_tools.html	Tue Sep 27 14:24:10 2022 -0600
+++ b/site/features_tools.html	Tue Sep 27 14:24:30 2022 -0600
@@ -43,7 +43,7 @@
 					Assets inside the browser can also be dragged into other tools (such as Hammer).
 					<br>
 					<div class="mediaContainer">
-						<video width="577" height="438" autoplay loop>
+						<video width="577" height="438" autoplay loop loading="lazy">
 								<source src="features/tools/asset_browser_demo.webm" type="video/webm">
 								(Unsupported video format?)
 							</video> 
@@ -63,20 +63,20 @@
 			</p>
 			<br>
 			<div class="mediaContainer">
-				<video width="256" height="256" autoplay loop>
+				<video width="256" height="256" autoplay loop loading="lazy">
 						<source src="features/tools/hammer/editbasics.webm" type="video/webm" title="Mesh editing">
 						Mesh Editing (Video)
 				</video> 
-				<video width="256" height="256" autoplay loop>
+				<video width="256" height="256" autoplay loop loading="lazy">
 						<source src="features/tools/hammer/convexmesh.webm" type="video/webm" title="Convex mesh editing">
 						Convex Mesh Editing (Video)
 				</video> 
-				<video width="256" height="256" autoplay loop>
+				<video width="256" height="256" autoplay loop loading="lazy">
 						<source src="features/tools/hammer/faceremoval.webm" type="video/webm" title="Convex mesh editing">
 						Convex Mesh Editing (Video)
 				</video>
-				<video width="256" height="256" autoplay loop>
-						<source src="features/tools/hammer/edittimelapse.webm" type="video/webm" title="Convex mesh editing">
+				<video width="256" height="256" autoplay loop loading="lazy">
+						<source src="features/tools/hammer/edittimelapse.webm" type="video/webm" title="Convex mesh editing" loading="lazy">
 						Convex Mesh Editing (Video)
 				</video>
 			</div> 
@@ -98,7 +98,7 @@
 			</p>
 				<br>
 				<div class="mediaContainer">
-					<img class="mediaImage" src="features/tools/met/properties.png" width="578px">
+					<img class="mediaImage" src="features/tools/met/properties.png" width="578px" loading="lazy">
 				</div> 
 				<br>
 			<p>
@@ -117,7 +117,7 @@
 				<br>
 				<div class="mediaContainer">
 					<img class="mediaImage" src="features/tools/model_editor/editor.png" width="653px">
-					<video  height="400px" autoplay loop>
+					<video  height="400px" autoplay loop loading="lazy">
 							<source src="features/tools/model_editor/modelviewer.webm" type="video/webm" title="Model Viewer">
 							Convex Mesh Editing (Video)
 					</video>
@@ -138,7 +138,7 @@
 			</p>
 				<br>
 				<div class="mediaContainer">
-						<img class="mediaImage" src="features/tools/pet/pet_example.png" width="578px">
+						<img class="mediaImage" src="features/tools/pet/pet_example.png" width="578px" loading="lazy">
 				</div> 
 				<br>
 		</div>

mercurial