examples: Preload onmouseover images, so it's more responsive to the user.

icculus · icculus · commit 1c9127ee4dd4 · 2025-09-16T14:22:39.000-04:00
diff --git a/build-scripts/build-web-examples.pl b/build-scripts/build-web-examples.pl
@@ -274,6 +274,7 @@ sub generate_example_thumbnail {
     my $project = shift;
     my $category = shift;
     my $example = shift;
+    my $preloadhtmlref = shift;
 
     my $example_no_num = "$example";
     $example_no_num =~ s/\A\d+\-//;
@@ -283,8 +284,10 @@ sub generate_example_thumbnail {
     my $example_mouseover_html = '';
     if ( -f "$examples_dir/$category/$example/onmouseover.webp" ) {
         $example_mouseover_html = "onmouseover=\"this.src='/$project/$category/$example/onmouseover.webp'\" onmouseout=\"this.src='$example_image_url';\"";
+        $$preloadhtmlref .= "    <link rel='preload' as='image' href='/$project/$category/$example/onmouseover.webp'>\n";
     } elsif ( -f "$examples_dir/$category/onmouseover.webp" ) {
         $example_mouseover_html = "onmouseover=\"this.src='/$project/$category/onmouseover.webp'\" onmouseout=\"this.src='$example_image_url';\"";
+        $$preloadhtmlref .= "    <link rel='preload' as='image' href='/$project/$category/onmouseover.webp'>\n";
     }
 
     return "
@@ -300,10 +303,11 @@ sub generate_example_thumbnail {
 sub generate_example_thumbnails_for_category {
     my $project = shift;
     my $category = shift;
+    my $preloadhtmlref = shift;
     my @examples = get_examples_for_category($category);
     my $retval = '';
     foreach my $example (@examples) {
-        $retval .= generate_example_thumbnail($project, $category, $example);
+        $retval .= generate_example_thumbnail($project, $category, $example, $preloadhtmlref);
     }
     return $retval;
 }
@@ -325,7 +329,8 @@ sub handle_category_dir {
 
     closedir($dh);
 
-    my $examples_list_html = generate_example_thumbnails_for_category($project, $category);
+    my $preloadhtml = '';
+    my $examples_list_html = generate_example_thumbnails_for_category($project, $category, \$preloadhtml);
 
     my $dst = "$output_dir/$category";
 
@@ -345,6 +350,7 @@ sub handle_category_dir {
         s/\@project_name\@/$project/g;
         s/\@category_name\@/$category/g;
         s/\@category_description\@/$category_description/g;
+        s/\@preload_images_html\@/$preloadhtml/g;
         s/\@examples_list_html\@/$examples_list_html/g;
         s/\@preview_image\@/$preview_image/g;
         $html .= $_;
@@ -396,12 +402,13 @@ sub handle_category_dir {
 closedir($dh);
 
 # write homepage
-my $homepage_list_html = "";
+my $homepage_list_html = '';
+my $homepage_preloadhtml = '';
 foreach my $category (get_categories()) {
     my $category_description = get_category_description($category);
     $homepage_list_html .= "<h2>$category_description</h2>";
     $homepage_list_html .= "<div class='list'>";
-    $homepage_list_html .= generate_example_thumbnails_for_category($project, $category);
+    $homepage_list_html .= generate_example_thumbnails_for_category($project, $category, \$homepage_preloadhtml);
     $homepage_list_html .= "</div>";
 }
 
@@ -414,6 +421,7 @@ sub handle_category_dir {
     s/\@project_name\@/$project/g;
     s/\@homepage_list_html\@/$homepage_list_html/g;
     s/\@preview_image\@/$preview_image/g;
+    s/\@preload_images_html\@/$homepage_preloadhtml/g;
     $html .= $_;
 }
 close($htmltemplate);
diff --git a/examples/template-category.html b/examples/template-category.html
@@ -6,6 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>@project_name@ Examples: @category_description@</title>
     <link rel="icon" href="/@project_name@/thumbnail.png" type="image/png" />
+
+@preload_images_html@
+
     <link
       rel="stylesheet"
       type="text/css"
@@ -21,7 +24,6 @@
     <meta property="og:title" content="@project_name@ Examples: @category_description@">
     <meta property="og:description" content="@project_name@ Examples: @category_description@">
     <meta property="og:image" content="@preview_image@" />
-
   </head>
   <body>
     <header>
diff --git a/examples/template-homepage.html b/examples/template-homepage.html
@@ -6,6 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>@project_name@ Examples</title>
     <link rel="icon" href="/@project_name@/thumbnail.png" type="image/png" />
+
+@preload_images_html@
+
     <link
       rel="stylesheet"
       type="text/css"
