mirrors/SDL
1
0
Fork 0
mirror of https://github.com/libsdl-org/SDL.git synced 2025-09-28 14:08:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ryan C. Gordon
2025-09-16 14:22:39 -04:00
parent efb5829124
commit 1c9127ee4d
3 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
build-scripts/build-web-examples.pl
View File

@@ -274,6 +274,7 @@ sub generate_example_thumbnail {
my $project = shift; my $project = shift;
my $category = shift; my $category = shift;
my $example = shift; my $example = shift;
my $preloadhtmlref = shift;
my $example_no_num = "$example"; my $example_no_num = "$example";
$example_no_num =~ s/\A\d+\-//; $example_no_num =~ s/\A\d+\-//;
@@ -283,8 +284,10 @@ sub generate_example_thumbnail {
my $example_mouseover_html = ''; my $example_mouseover_html = '';
if ( -f "$examples_dir/$category/$example/onmouseover.webp" ) { 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';\""; $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" ) { } elsif ( -f "$examples_dir/$category/onmouseover.webp" ) {
$example_mouseover_html = "onmouseover=\"this.src='/$project/$category/onmouseover.webp'\" onmouseout=\"this.src='$example_image_url';\""; $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 " return "
@@ -300,10 +303,11 @@ sub generate_example_thumbnail {
sub generate_example_thumbnails_for_category { sub generate_example_thumbnails_for_category {
my $project = shift; my $project = shift;
my $category = shift; my $category = shift;
my $preloadhtmlref = shift;
my @examples = get_examples_for_category($category); my @examples = get_examples_for_category($category);
my $retval = ''; my $retval = '';
foreach my $example (@examples) { foreach my $example (@examples) {
$retval .= generate_example_thumbnail($project, $category, $example); $retval .= generate_example_thumbnail($project, $category, $example, $preloadhtmlref);
} }
return $retval; return $retval;
} }
@@ -325,7 +329,8 @@ sub handle_category_dir {
closedir($dh); 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"; my $dst = "$output_dir/$category";
@@ -345,6 +350,7 @@ sub handle_category_dir {
s/\@project_name\@/$project/g; s/\@project_name\@/$project/g;
s/\@category_name\@/$category/g; s/\@category_name\@/$category/g;
s/\@category_description\@/$category_description/g; s/\@category_description\@/$category_description/g;
s/\@preload_images_html\@/$preloadhtml/g;
s/\@examples_list_html\@/$examples_list_html/g; s/\@examples_list_html\@/$examples_list_html/g;
s/\@preview_image\@/$preview_image/g; s/\@preview_image\@/$preview_image/g;
$html .= $_; $html .= $_;
@@ -396,12 +402,13 @@ while (readdir($dh)) {
closedir($dh); closedir($dh);
# write homepage # write homepage
my $homepage_list_html = ""; my $homepage_list_html = '';
my $homepage_preloadhtml = '';
foreach my $category (get_categories()) { foreach my $category (get_categories()) {
my $category_description = get_category_description($category); my $category_description = get_category_description($category);
$homepage_list_html .= "<h2>$category_description</h2>"; $homepage_list_html .= "<h2>$category_description</h2>";
$homepage_list_html .= "<div class='list'>"; $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>"; $homepage_list_html .= "</div>";
} }
@@ -414,6 +421,7 @@ while (<$htmltemplate>) {
s/\@project_name\@/$project/g; s/\@project_name\@/$project/g;
s/\@homepage_list_html\@/$homepage_list_html/g; s/\@homepage_list_html\@/$homepage_list_html/g;
s/\@preview_image\@/$preview_image/g; s/\@preview_image\@/$preview_image/g;
s/\@preload_images_html\@/$homepage_preloadhtml/g;
$html .= $_; $html .= $_;
} }
close($htmltemplate); close($htmltemplate);

4
examples/template-category.html
View File

@@ -6,6 +6,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>@project_name@ Examples: @category_description@</title> <title>@project_name@ Examples: @category_description@</title>
<link rel="icon" href="/@project_name@/thumbnail.png" type="image/png" /> <link rel="icon" href="/@project_name@/thumbnail.png" type="image/png" />
@preload_images_html@
<link <link
rel="stylesheet" rel="stylesheet"
type="text/css" type="text/css"
@@ -21,7 +24,6 @@
<meta property="og:title" content="@project_name@ Examples: @category_description@"> <meta property="og:title" content="@project_name@ Examples: @category_description@">
<meta property="og:description" content="@project_name@ Examples: @category_description@"> <meta property="og:description" content="@project_name@ Examples: @category_description@">
<meta property="og:image" content="@preview_image@" /> <meta property="og:image" content="@preview_image@" />
</head> </head>
<body> <body>
<header> <header>

3
examples/template-homepage.html
View File

@@ -6,6 +6,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>@project_name@ Examples</title> <title>@project_name@ Examples</title>
<link rel="icon" href="/@project_name@/thumbnail.png" type="image/png" /> <link rel="icon" href="/@project_name@/thumbnail.png" type="image/png" />
@preload_images_html@
<link <link
rel="stylesheet" rel="stylesheet"
type="text/css" type="text/css"