sorogon/StaticGalleryBuilder
1
0
Fork 0
mirror of https://github.com/greflm13/StaticGalleryBuilder.git synced 2026-02-05 11:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

prefetch images

Browse Source
This commit is contained in:
Flo Greistorfer
2024-10-20 10:41:12 +02:00
parent 35f2ea7536
commit c429cd06c8
2 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
modules/generate_html.py
View File

@@ -346,7 +346,6 @@ def create_html_file(folder: str, title: str, foldername: str, images: List[Dict
subdirectories=subfolders, subdirectories=subfolders,
images=images, images=images,
info=_info, info=_info,
allimages=images,
webmanifest=_args.generate_webmanifest, webmanifest=_args.generate_webmanifest,
version=version, version=version,
) )

23
templates/index.html.j2
View File

@@ -12,10 +12,6 @@
{%- if theme %} {%- if theme %}
<link rel="preload" href="{{ theme }}" as="style"> <link rel="preload" href="{{ theme }}" as="style">
{%- endif %} {%- endif %}
<link rel="preload" href="{{ root }}.static/pswp/photoswipe.css" as="style">
<link rel="preload" href="{{ root }}.static/pswp/default-skin/default-skin.css" as="style">
<link rel="preload" href="{{ root }}.static/pswp/photoswipe.min.js" as="script">
<link rel="preload" href="{{ root }}.static/pswp/photoswipe-ui-default.min.js" as="script">
<link rel="icon" type="image/x-icon" href="{{ favicon }}"> <link rel="icon" type="image/x-icon" href="{{ favicon }}">
<link rel="stylesheet" href="{{ stylesheet }}"> <link rel="stylesheet" href="{{ stylesheet }}">
{%- if theme %} {%- if theme %}
@@ -30,6 +26,10 @@
</head> </head>
<body> <body>
<link rel="preload" href="{{ root }}.static/pswp/photoswipe.css" as="style" >
<link rel="preload" href="{{ root }}.static/pswp/default-skin/default-skin.css" as="style">
<link rel="preload" href="{{ root }}.static/pswp/photoswipe.min.js" as="script">
<link rel="preload" href="{{ root }}.static/pswp/photoswipe-ui-default.min.js" as="script">
<div class="header"> <div class="header">
<ul class="navbar"> <ul class="navbar">
<li><a href="{{ root }}">Home</a></li> <li><a href="{{ root }}">Home</a></li>
@@ -49,6 +49,9 @@
{%- endif %} {%- endif %}
</ul> </ul>
{% if subdirectories %} {% if subdirectories %}
{%- for subdirectory in subdirectories %}
<link rel="preload" href="{{ subdirectory.url }}/index.html" type="text/html">
{%- endfor %}
<div class="folders"> <div class="folders">
{%- for subdirectory in subdirectories %} {%- for subdirectory in subdirectories %}
<a href="{{ subdirectory.url }}"> <a href="{{ subdirectory.url }}">
@@ -67,7 +70,7 @@
{%- for image in images %} {%- for image in images %}
<div class="column"> <div class="column">
<figure> <figure>
<img src="{{ image.thumbnail }}" alt="{{ image.name }}" onclick="openSwipe({{ ns.count }})" /> <img src="{{ image.thumbnail }}" alt="{{ image.name }}" onclick="openSwipe({{ ns.count }})" onmouseover="prefetch('{{ image.url }}')"/>
{%- set ns.count = ns.count + 1 %} {%- set ns.count = ns.count + 1 %}
<figcaption class="caption">{{ image.name }} <figcaption class="caption">{{ image.name }}
{%- if image.tiff %} {%- if image.tiff %}
@@ -152,7 +155,7 @@
<script> <script>
var pswpElement = document.querySelectorAll('.pswp')[0]; var pswpElement = document.querySelectorAll('.pswp')[0];
var items = [ var items = [
{%- for image in allimages %} {%- for image in images %}
{%- if image.exifdata.DateTime %} {%- if image.exifdata.DateTime %}
{ src: "{{ image.url }}", w: {{ image.width }}, h: {{ image.height }}, msrc: "{{ image.thumbnail }}", title: "Captured: {{ image.exifdata.DateTime }}" }, { src: "{{ image.url }}", w: {{ image.width }}, h: {{ image.height }}, msrc: "{{ image.thumbnail }}", title: "Captured: {{ image.exifdata.DateTime }}" },
{%- else %} {%- else %}
@@ -190,6 +193,14 @@
function topFunction() { function topFunction() {
window.scrollTo({ top: 0, behavior: 'smooth' }) window.scrollTo({ top: 0, behavior: 'smooth' })
} }
function prefetch(img) {
var link = document.createElement("link");
link.rel = "preload";
link.as = "image";
link.href = img;
document.body.appendChild(link);
}
</script> </script>
{%- endif %} {%- endif %}
</body> </body>