failed-galleries/python-gallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2025-01-01 12:26:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix lazyLoading script

Browse source
This commit is contained in:
Michał 2023-04-04 14:21:16 +00:00
parent a83930e377
commit bf8142623e
5 changed files with 6 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
gallery/static/js/pre/main.js
View file

@ -5,14 +5,12 @@ function imgFade(obj, time = 250) {
} }
// Lazy load images when they are in view // Lazy load images when they are in view
function loadOnView() { function loadOnView() {
let lazyLoad = document.querySelectorAll('#lazy-load'); const lazyLoad = document.querySelectorAll('#lazy-load');
for (let i = 0; i < lazyLoad.length; i++) { for (let i = 0; i < lazyLoad.length; i++) {
let image = lazyLoad[i]; let image = lazyLoad[i];
if (image.getBoundingClientRect().top < window.innerHeight && image.getBoundingClientRect().bottom > 0) { if (image.getBoundingClientRect().top < window.innerHeight && image.getBoundingClientRect().bottom > 0) {
if (!image.src) { if (!image.src) { image.src = image.getAttribute('data-src') }
image.src = `/api/file/${image.getAttribute('data-src')}?r=thumb` // e=webp
}
} }
} }
} }

2
gallery/templates/groups/group.html
View file

@ -68,7 +68,7 @@
<p class="image-subtitle"></p> <p class="image-subtitle"></p>
<p class="image-title"><span class="time">{{ image.created_at }}</span></p> <p class="image-title"><span class="time">{{ image.created_at }}</span></p>
</div> </div>
<img alt="{{ image.post_alt }}" data-src="{{ image.file_name }}" onload="this.classList.add('loaded');" id="lazy-load"/> <img alt="{{ image.post_alt }}" data-src="{{ url_for('api.file', file_name=image.file_name) }}?r=thumb" onload="this.classList.add('loaded');" id="lazy-load"/>
</a> </a>
{% endfor %} {% endfor %}
</div> </div>

2
gallery/templates/groups/list.html
View file

@ -31,7 +31,7 @@
<div class="images size-{{ group.images|length }}"> <div class="images size-{{ group.images|length }}">
{% if group.images|length > 0 %} {% if group.images|length > 0 %}
{% for image in group.images %} {% for image in group.images %}
<img data-src="{{ image.file_name }}" onload="this.classList.add('loaded');" id="lazy-load" class="data-{{ loop.index }}"/> <img data-src="{{ url_for('api.file', file_name=image.file_name) }}?r=thumb" onload="this.classList.add('loaded');" id="lazy-load" class="data-{{ loop.index }}"/>
{% endfor %} {% endfor %}
{% else %} {% else %}
<img src="{{ url_for('static', filename='error.png') }}" class="loaded"/> <img src="{{ url_for('static', filename='error.png') }}" class="loaded"/>

2
gallery/templates/index.html
View file

@ -21,7 +21,7 @@
<p class="image-subtitle"></p> <p class="image-subtitle"></p>
<p class="image-title"><span class="time">{{ image.created_at }}</span></p> <p class="image-title"><span class="time">{{ image.created_at }}</span></p>
</div> </div>
<img fetchpriority="low" alt="{{ image.post_alt }}" data-src="{{ image.file_name }}" onload="this.classList.add('loaded');" id="lazy-load"/> <img fetchpriority="low" alt="{{ image.post_alt }}" data-src="{{ url_for('api.file', file_name=image.file_name) }}?r=thumb" onload="this.classList.add('loaded');" id="lazy-load"/>
</a> </a>
{% endfor %} {% endfor %}
</div> </div>

2
gallery/views/api.py
View file

@ -38,7 +38,7 @@ def file(file_name):
file_name = secure_filename(file_name) # Sanitize file name file_name = secure_filename(file_name) # Sanitize file name
# if no args are passed, return the raw file # if no args are passed, return the raw file
if not request.args: if not res and not ext:
if not os.path.exists(os.path.join(current_app.config['UPLOAD_FOLDER'], file_name)): if not os.path.exists(os.path.join(current_app.config['UPLOAD_FOLDER'], file_name)):
abort(404) abort(404)
return send_from_directory(current_app.config['UPLOAD_FOLDER'], file_name) return send_from_directory(current_app.config['UPLOAD_FOLDER'], file_name)