420 lines
No EOL
27 KiB
HTML
Executable file
420 lines
No EOL
27 KiB
HTML
Executable file
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
{{ if .IsThemeDark }}
|
||
<meta name="darkreader-lock">
|
||
{{ end }}
|
||
<title>{{ .Query }} - {{ translate "site_name" }}</title>
|
||
<link rel="stylesheet" href="/static/css/style.css">
|
||
<link rel="stylesheet" href="/static/css/style-fixedwidth.css">
|
||
<link rel="stylesheet" href="/static/css/{{.Theme}}.css">
|
||
<link rel="search" type="application/opensearchdescription+xml" title="{{ translate "site_name" }}" href="/opensearch.xml">
|
||
<!-- Icons -->
|
||
<link rel="icon" href="{{ .IconPathSVG }}" type="image/svg+xml">
|
||
<link rel="icon" href="{{ .IconPathPNG }}" type="image/png">
|
||
<link rel="apple-touch-icon" href="{{ .IconPathPNG }}">
|
||
</head>
|
||
<body>
|
||
<form action="/search" id="prev-next-form" class="results-search-container" method="GET" autocomplete="off">
|
||
<input type="hidden" name="t" value="image" />
|
||
<h1 class="logomobile">
|
||
<div class="logo-container" herf="/">
|
||
<a href="/">
|
||
<svg
|
||
id="svg"
|
||
version="1.1"
|
||
viewBox="0, 0, 29 ,86"
|
||
sodipodi:docname="logo.svg"
|
||
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
|
||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
xmlns:svg="http://www.w3.org/2000/svg"
|
||
xmlns:bx="https://boxy-svg.com">
|
||
<sodipodi:namedview
|
||
id="namedview19"
|
||
pagecolor="#ffffff"
|
||
bordercolor="#666666"
|
||
borderopacity="1.0"
|
||
inkscape:pageshadow="2"
|
||
inkscape:pageopacity="0.0"
|
||
inkscape:pagecheckerboard="0"
|
||
showgrid="false"
|
||
inkscape:snap-grids="true"
|
||
inkscape:zoom="4.8866279"
|
||
inkscape:cx="5.8322427"
|
||
inkscape:cy="12.483046"
|
||
inkscape:window-width="1920"
|
||
inkscape:window-height="1008"
|
||
inkscape:window-x="0"
|
||
inkscape:window-y="0"
|
||
inkscape:window-maximized="1"
|
||
inkscape:current-layer="svg" />
|
||
<defs
|
||
id="defs4">
|
||
<bx:grid
|
||
x="-70.745"
|
||
y="-5.396"
|
||
width="237.293"
|
||
height="88.009" />
|
||
</defs>
|
||
<g
|
||
id="svgg"
|
||
transform="translate(-31.678924,4.8938759)">
|
||
<path
|
||
id="path1"
|
||
d="m -44.354555,0.78356149 c -26.434,5.97600001 -30.434,42.38301051 -6.319,54.94200051 1.703,0.88701 4.424,1.702 7.829,2.221 4.486,0.68301 9.6,0.86601 9.583,0.154 -0.035,-1.43199 -7.299,-8.279 -8.664,-8.279 -3.155,0 -9.941,-5.66599 -11.972,-9.995 -8.053,-17.17399 5.784,-35.2969905 22.777,-29.8329902 13.493,4.3390002 18.108,22.6990002 8.656,34.4380002 -1.846,2.29399 -1.744,2.299 -4.39,-0.225 -4.805,-4.583 -8.58,-5.24601 -11.988,-2.104 -2.173,2.002 -2.148,2.663 0.153,4.144 1.906,1.227 13.408,12.956 17.488,17.833 4.294,5.133 5.245,6.141 7.526,7.971 4.4209992,3.548 12.4439992,5.86 14.67499925,4.229 0.67199995,-0.492 1.86099995,-7.792 1.35199995,-8.302 -0.118,-0.118 -1.337,-0.393 -2.70799997,-0.612 -5.35200003,-0.854 -9.21900003,-3.454 -14.18899923,-9.542 -3.492,-4.278 -4.129,-5.268 -3.386,-5.268 2.543,0 8.0529992,-8.62 9.8619992,-15.429 5.712,-21.502 -14.1099992,-41.3560005 -36.2849992,-36.34300051 m 65.138,1.52300001 c -15.8590008,3.717 -25.6410008,20.0570005 -21.51200077,35.9340005 3.73899997,14.378 19.16900077,21.386 34.40300077,19.394 4.709,-0.616 2.438,-0.651 4.456,-0.792 2.018,-0.141 6.447,-0.015 6.93,-0.194 0.409,0.019 0.716,-0.458 0.723,-0.948 l -0.006,-13.389 c -0.003,-7.364 -0.153,-13.62 -0.332,-13.902 -0.258,-0.407 -2.36,-0.488 -10.182,-0.391 -11.445,0.143 -10.964,-0.036 -10.964,4.079 0,2.439 -0.044,3.991 1.166,4.706 1.139,0.674 3.431,0.58499 6.689,0.409 l 3.754,-0.202 0.276,5.676 c 0.321,6.593 0.561,6.151 -3.647,6.704 -15.524,2.038 -24.0100008,-5.017 -23.3770008,-19.434 0.6630003,-15.104 12.1950008,-22.7790005 26.9570008,-17.94 4.51,1.478 4.409,1.524 6.165,-2.7910006 1.5,-3.6869999 1.499,-3.6919999 -0.825,-4.6919999 -5.427,-2.335 -15.559,-3.426 -20.674,-2.227 m 78.83,0.796 c -2.87,0.772 -2.908,0.847 -3.151,6.1239999 -0.257,5.5670006 0.122,4.9680006 -3.351,5.2910006 -3.431,0.319 -3.325,0.157 -2.758,4.206 0.61,4.363 0.59,4.34 3.755,4.34 h 2.651 v 12.696 c 0,14.499 1.548,16.328 3.503005,18.304 3.592,3.477 9.588,4.915 14.93,3.057 2.445,-0.851 2.427,-0.809 2.176,-4.955 -0.247,-4.096 -0.428,-3.489 -3.157,-2.908 -7.732,1.646 -8.272,0.605 -8.272,-15.048 v -11.341 h 5.664 l 5.335,-0.09 c 0.676,-0.02 0.976,0.395 1.286,-3.905 0.346,-4.798 -0.203,-4.014 -0.808,-4.144 l -5.813,0.177 -5.664,0.268 v -5.163 c 0,-5.8370005 -0.204,-6.4770005 -2.251,-7.0460005 -1.752,-0.486 -1.762,-0.486 -4.075005,0.137 m -34.494,11.0180005 c -2.645,0.382 -4.719,1.042 -8.548,2.718 l -4.031,1.766 c -1.086,0.383 -0.284,1.285 0.687,3.881 1.063,2.752 1.355,3.356 2.115,3.035 0.76,-0.321 0.701,-0.229 1.427,-0.649 9.076,-5.254 20.264,-2.635 20.264,4.742 v 2.135 l -5.957,0.205 c -13.838,0.477 -20.284,4.751 -20.374,13.511 -0.128,12.397 14.176,17.214 24.615,8.289 l 2.302,-1.967 0.23,1.849 c 0.316,2.538 0.608,3.064 2.044,3.67 1.414,0.597 7.158,0.623 7.746,0.035 0.767,-0.767 0.374,-6.004 -0.245,-6.337 -0.942,-0.507 -0.773,-1.57 -0.885,-12.635 -0.152,-14.866 -0.508,-16.501 -4.391,-20.131 -3.037,-2.839 -11.558,-4.903 -16.999,-4.117 m 72.851005,0.007 c -27.192,5.263 -24.132,43.953 3.472,43.89 14.663,-0.033 24.399,-12.771 21.526,-28.162 -1.856,-9.949 -14.324,-17.793 -24.998,-15.728 m 8.286,8.958 c 6.882,2.345 9.617,11.514 5.902,19.79 -4.124,9.191 -17.884,9.174 -22.137,-0.027 -1.317,-2.849 -1.237,-10.788 0.137,-13.535 2.999,-5.999 9.448,-8.494 16.098,-6.228 m -68.832005,18.5 v 3.091 l -1.856,1.636 c -7.456,6.574 -16.358,5.485 -15.595,-1.907 0.448,-4.344 3.618,-5.768 13.056,-5.866 l 4.395,-0.046 v 3.092"
|
||
stroke="none"
|
||
fill-rule="evenodd"
|
||
style="fill:currentColor" />
|
||
<g
|
||
aria-label="SEARCH ENGINE"
|
||
id="text7"
|
||
style="font-family:'ADLaM Display';white-space:pre;fill:currentColor"
|
||
transform="matrix(0.96497818,0,0,0.96497818,-146.24769,-215.06201)">
|
||
<path
|
||
d="m 170.42488,293.75705 v 1.1543 q -0.67383,-0.32227 -1.27148,-0.48047 -0.59766,-0.15821 -1.1543,-0.15821 -0.9668,0 -1.49414,0.375 -0.52149,0.375 -0.52149,1.06641 0,0.58008 0.34571,0.87891 0.35156,0.29297 1.32422,0.47461 l 0.71484,0.14648 q 1.32422,0.25195 1.95117,0.89063 0.63281,0.63281 0.63281,1.69921 0,1.27149 -0.85546,1.92774 -0.84961,0.65625 -2.4961,0.65625 -0.62109,0 -1.32422,-0.14063 -0.69726,-0.14062 -1.44726,-0.41601 v -1.21875 q 0.7207,0.4043 1.41211,0.60937 0.6914,0.20508 1.35937,0.20508 1.01367,0 1.56446,-0.39844 0.55078,-0.39843 0.55078,-1.13671 0,-0.64454 -0.39844,-1.00782 -0.39258,-0.36328 -1.29492,-0.54492 l -0.72071,-0.14062 q -1.32421,-0.26368 -1.91601,-0.82618 -0.5918,-0.5625 -0.5918,-1.56445 0,-1.16016 0.81445,-1.82812 0.82032,-0.66797 2.25586,-0.66797 0.61524,0 1.25391,0.11133 0.63867,0.11132 1.30664,0.33398 z"
|
||
id="path13" />
|
||
<path
|
||
d="m 172.79793,293.46994 h 5.53125 v 0.99609 h -4.34766 v 2.58985 h 4.16602 v 0.99609 h -4.16602 v 3.16992 h 4.45313 v 0.9961 h -5.63672 z"
|
||
id="path15" />
|
||
<path
|
||
d="m 183.30379,294.63596 -1.60547,4.35351 h 3.2168 z m -0.66797,-1.16602 h 1.3418 l 3.33398,8.74805 h -1.23047 l -0.79687,-2.24414 h -3.94336 l -0.79688,2.24414 h -1.24805 z"
|
||
id="path17" />
|
||
<path
|
||
d="m 192.73738,298.11642 q 0.38086,0.12891 0.73828,0.55079 0.36328,0.42187 0.72656,1.16015 l 1.20118,2.39063 h -1.27149 l -1.11914,-2.24414 q -0.43359,-0.87891 -0.84375,-1.16602 -0.4043,-0.28711 -1.10742,-0.28711 h -1.28906 v 3.69727 h -1.1836 v -8.74805 h 2.67188 q 1.5,0 2.23828,0.62695 0.73828,0.62696 0.73828,1.89258 0,0.82617 -0.38672,1.3711 -0.38086,0.54492 -1.11328,0.75585 z m -2.96484,-3.67382 v 3.10547 h 1.48828 q 0.85547,0 1.28906,-0.39258 0.43945,-0.39844 0.43945,-1.16602 0,-0.76758 -0.43945,-1.1543 -0.43359,-0.39257 -1.28906,-0.39257 z"
|
||
id="path19" />
|
||
<path
|
||
d="m 202.87996,294.14377 v 1.24805 q -0.59766,-0.55665 -1.27734,-0.83204 -0.67383,-0.27539 -1.43555,-0.27539 -1.5,0 -2.29688,0.91993 -0.79687,0.91406 -0.79687,2.64843 0,1.72852 0.79687,2.64844 0.79688,0.91406 2.29688,0.91406 0.76172,0 1.43555,-0.27539 0.67968,-0.27539 1.27734,-0.83203 v 1.23633 q -0.62109,0.42187 -1.31836,0.63281 -0.69141,0.21094 -1.46484,0.21094 -1.98633,0 -3.12891,-1.21289 -1.14258,-1.21875 -1.14258,-3.32227 0,-2.10937 1.14258,-3.32226 1.14258,-1.21875 3.12891,-1.21875 0.78515,0 1.47656,0.21093 0.69726,0.20508 1.30664,0.6211 z"
|
||
id="path21" />
|
||
<path
|
||
d="m 204.70808,293.46994 h 1.1836 v 3.58594 h 4.30078 v -3.58594 h 1.18359 v 8.74805 h -1.18359 v -4.16602 h -4.30078 v 4.16602 h -1.1836 z"
|
||
id="path23" />
|
||
<path
|
||
d="m 217.54597,293.46994 h 5.53125 v 0.99609 h -4.34765 v 2.58985 h 4.16601 v 0.99609 h -4.16601 v 3.16992 h 4.45312 v 0.9961 h -5.63672 z"
|
||
id="path25" />
|
||
<path
|
||
d="m 225.12801,293.46994 h 1.59375 l 3.8789,7.31836 v -7.31836 h 1.14844 v 8.74805 h -1.59375 l -3.87891,-7.31836 v 7.31836 h -1.14843 z"
|
||
id="path27" />
|
||
<path
|
||
d="m 240.06941,300.96994 v -2.34961 h -1.93359 v -0.97266 h 3.10547 v 3.75586 q -0.68555,0.48633 -1.51172,0.73829 -0.82617,0.24609 -1.76367,0.24609 -2.05078,0 -3.21094,-1.19531 -1.1543,-1.20118 -1.1543,-3.33985 0,-2.14453 1.1543,-3.33984 1.16016,-1.20117 3.21094,-1.20117 0.85547,0 1.62304,0.21093 0.77344,0.21094 1.42383,0.6211 v 1.25976 q -0.65625,-0.55664 -1.39453,-0.83789 -0.73828,-0.28125 -1.55273,-0.28125 -1.60547,0 -2.41407,0.89649 -0.80273,0.89648 -0.80273,2.67187 0,1.76953 0.80273,2.66602 0.8086,0.89648 2.41407,0.89648 0.62695,0 1.11914,-0.10547 0.49218,-0.11132 0.88476,-0.33984 z"
|
||
id="path29" />
|
||
<path
|
||
d="m 243.4034,293.46994 h 1.18359 v 8.74805 h -1.18359 z"
|
||
id="path31" />
|
||
<path
|
||
d="m 246.94246,293.46994 h 1.59375 l 3.87891,7.31836 v -7.31836 h 1.14843 v 8.74805 h -1.59375 l -3.8789,-7.31836 v 7.31836 h -1.14844 z"
|
||
id="path33" />
|
||
<path
|
||
d="m 255.91902,293.46994 h 5.53125 v 0.99609 h -4.34765 v 2.58985 h 4.16601 v 0.99609 h -4.16601 v 3.16992 h 4.45312 v 0.9961 h -5.63672 z"
|
||
id="path35" />
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</h1>
|
||
<div class="wrapper-results">
|
||
<input type="text" name="q" value="{{ .Query }}" id="search-input"/>
|
||
<button id="search-wrapper-ico" class="material-icons-round" name="t" value="image">search</button>
|
||
<div class="autocomplete">
|
||
<ul>
|
||
</ul>
|
||
</div>
|
||
<input type="submit" class="hide" name="t" value="image" />
|
||
</div>
|
||
<div class="sub-search-button-wrapper">
|
||
<div class="search-container-results-btn">
|
||
<button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="text">search</button>
|
||
<button name="t" value="text" class="clickable">{{ translate "web" }}</button>
|
||
</div>
|
||
<div class="search-container-results-btn">
|
||
<button id="sub-search-wrapper-ico" class="material-icons-round clickable search-active" name="t" value="image">image</button>
|
||
<button name="t" value="image" class="clickable search-active">{{ translate "images" }}</button>
|
||
</div>
|
||
<div class="search-container-results-btn">
|
||
<button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="video">movie</button>
|
||
<button name="t" value="video" class="clickable">{{ translate "videos" }}</button>
|
||
</div>
|
||
<div class="search-container-results-btn">
|
||
<button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="forum">forum</button>
|
||
<button name="t" value="forum" class="clickable">{{ translate "forums" }}</button>
|
||
</div>
|
||
<div id="content" class="js-enabled">
|
||
<div class="search-container-results-btn">
|
||
<button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="map">map</button>
|
||
<button name="t" value="map" class="clickable">{{ translate "maps" }}</button>
|
||
</div>
|
||
</div>
|
||
<div class="search-container-results-btn">
|
||
<button id="sub-search-wrapper-ico" class="material-icons-round clickable" name="t" value="file">share</button>
|
||
<button name="t" value="file" class="clickable">{{ translate "torrents" }}</button>
|
||
</div>
|
||
</div>
|
||
<noscript>
|
||
<input type="hidden" name="js_enabled" value="true">
|
||
</noscript>
|
||
</form>
|
||
<form class="results_settings" action="/search" method="get">
|
||
<input type="hidden" name="q" value="{{ .Query }}">
|
||
<select class="results-settings" name="safe" id="safeSearchSelect">
|
||
<option value="disabled" {{if eq .Safe "disabled"}}selected{{end}}>{{ translate "safe_search_off" }}</option>
|
||
<option value="active" {{if eq .Safe "active"}}selected{{end}}>{{ translate "safe_search_on" }}</option>
|
||
</select>
|
||
<select class="results-settings" name="lang" id="languageSelect">
|
||
{{range .LanguageOptions}}
|
||
<option value="{{.Code}}" {{if eq .Code $.CurrentLang}}selected{{end}}>{{.Name}}</option> <!-- this is too wide or too less, fix -->
|
||
{{end}}
|
||
</select>
|
||
<button class="results-save" name="t" value="image">{{ translate "save_settings" }}</button>
|
||
</form>
|
||
<div class="search-results" id="results">
|
||
|
||
<!-- Results go here -->
|
||
{{ if .Results }}
|
||
<div class="images images_viewer_hidden">
|
||
<!-- Images Grid -->
|
||
{{ range $index, $result := .Results }}
|
||
<div class="image">
|
||
{{ if $.HardCacheEnabled }}
|
||
<noscript>
|
||
<!-- JavaScript is disabled; serve actual images -->
|
||
<img src="{{ $result.ProxyFull }}" alt="{{ $result.Title }}" class="clickable" />
|
||
</noscript>
|
||
|
||
<!-- JavaScript is enabled; use placeholders -->
|
||
<div id="content" class="js-enabled">
|
||
<img
|
||
src="/static/images/placeholder.svg"
|
||
data-id="{{ $result.ID }}"
|
||
data-full="{{ $result.ProxyFull }}"
|
||
data-proxy-full="{{ $result.ProxyThumb }}"
|
||
alt="{{ $result.Title }}"
|
||
class="clickable"
|
||
/>
|
||
</div>
|
||
{{ else }}
|
||
<!-- HardCacheEnabled is false; serve images directly -->
|
||
<img src="{{ $result.ProxyFull }}" alt="{{ $result.Title }}" class="clickable" />
|
||
{{ end }}
|
||
<div class="resolution">{{ $result.Width }} × {{ $result.Height }}</div>
|
||
<div class="details">
|
||
<span class="img_title clickable">{{ $result.Title }}</span>
|
||
<a href="{{ $result.Source }}" target="_blank" class="img_source">{{ translate "source" }}</a>
|
||
</div>
|
||
</div>
|
||
{{ end }}
|
||
</div>
|
||
<!-- Nav buttons -->
|
||
<noscript>
|
||
<form action="/search" id="prev-next-form" class="results-search-container" method="GET" autocomplete="off">
|
||
<!-- Existing form fields -->
|
||
<input type="hidden" name="js_disabled" value="true">
|
||
</form>
|
||
<!-- Nav buttons -->
|
||
<div class="pagination">
|
||
{{ if .HasPrevPage }}
|
||
<a href="/search?q={{ .Query }}&t=image&p={{ sub .Page 1 }}&js_disabled=true">{{ translate "previous" }}</a>
|
||
{{ end }}
|
||
{{ if .HasNextPage }}
|
||
<a href="/search?q={{ .Query }}&t=image&p={{ add .Page 1 }}&js_disabled=true">{{ translate "next" }}</a>
|
||
{{ end }}
|
||
</div>
|
||
</noscript>
|
||
{{ else if .NoResults }}
|
||
<div class="no-results">{{ translate "no_results" .Query }}</div>
|
||
{{ else }}
|
||
<div class="no-more-results">{{ translate "no_more_results" }}</div>
|
||
{{ end }}
|
||
</div>
|
||
<div class="message-bottom-left" id="message-bottom-left">
|
||
<span>{{ translate "searching_for_new_results" }}</span>
|
||
</div>
|
||
|
||
<div id="image-viewer-overlay" style="display: none;"></div>
|
||
|
||
<div id="template-data" data-page="{{ .Page }}" data-query="{{ .Query }}" data-type="image" data-hard-cache-enabled="{{ .HardCacheEnabled }}"></div>
|
||
<script defer src="/static/js/autocomplete.js"></script>
|
||
<script defer src="/static/js/imagetitletrim.js"></script>
|
||
<script defer src="/static/js/imageviewer.js"></script>
|
||
<!-- JavaScript to Load Images and Dynamic loading of the page -->
|
||
<script>
|
||
(function() {
|
||
// Configuration
|
||
const imageStatusInterval = 500; // Interval in milliseconds to check image status
|
||
const scrollThreshold = 500; // Distance from bottom of the page to trigger loading
|
||
let isFetching = false;
|
||
let page = parseInt(document.getElementById('template-data').getAttribute('data-page')) || 1;
|
||
let query = document.getElementById('template-data').getAttribute('data-query');
|
||
let hardCacheEnabled = document.getElementById('template-data').getAttribute('data-hard-cache-enabled') === 'true';
|
||
let noMoreImages = false; // Flag to indicate if there are no more images to load
|
||
|
||
let imageElements = [];
|
||
let imageIds = [];
|
||
|
||
/**
|
||
* Function to handle image load errors with retry logic
|
||
* @param {HTMLElement} imgElement - The image element that failed to load
|
||
* @param {number} retryCount - Number of retries left
|
||
* @param {number} retryDelay - Delay between retries in milliseconds
|
||
*/
|
||
function handleImageError(imgElement, retryCount = 3, retryDelay = 1000) {
|
||
if (retryCount > 0) {
|
||
setTimeout(() => {
|
||
imgElement.src = imgElement.getAttribute('data-full');
|
||
imgElement.onerror = function() {
|
||
handleImageError(imgElement, retryCount - 1, retryDelay);
|
||
};
|
||
}, retryDelay);
|
||
} else {
|
||
// After retries, hide the image container or set a fallback image
|
||
console.warn('Image failed to load after retries:', imgElement.getAttribute('data-full'));
|
||
imgElement.parentElement.style.display = 'none'; // Hide the image container
|
||
// Alternatively, set a fallback image:
|
||
// imgElement.src = '/static/images/fallback.svg';
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Function to ensure the page is scrollable by loading more images if necessary
|
||
*/
|
||
function ensureScrollable() {
|
||
if (noMoreImages) return; // Do not attempt if no more images are available
|
||
// Check if the page is not scrollable
|
||
if (document.body.scrollHeight <= window.innerHeight) {
|
||
// If not scrollable, fetch the next page
|
||
fetchNextPage();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Function to fetch the next page of images
|
||
*/
|
||
function fetchNextPage() {
|
||
if (isFetching || noMoreImages) return;
|
||
isFetching = true;
|
||
page += 1;
|
||
|
||
fetch(`/search?q=${encodeURIComponent(query)}&t=image&p=${page}&ajax=true`)
|
||
.then(response => response.text())
|
||
.then(html => {
|
||
// Parse the returned HTML and extract image elements
|
||
let parser = new DOMParser();
|
||
let doc = parser.parseFromString(html, 'text/html');
|
||
let newImages = doc.querySelectorAll('.image');
|
||
|
||
if (newImages.length > 0) {
|
||
let resultsContainer = document.querySelector('.images');
|
||
newImages.forEach(imageDiv => {
|
||
// Append new images to the container
|
||
resultsContainer.appendChild(imageDiv);
|
||
|
||
// Get the img element
|
||
let img = imageDiv.querySelector('img');
|
||
if (img) {
|
||
if (hardCacheEnabled) {
|
||
// Replace image with placeholder
|
||
img.src = '/static/images/placeholder.svg';
|
||
img.onerror = function() {
|
||
handleImageError(img);
|
||
};
|
||
|
||
let id = img.getAttribute('data-id');
|
||
if (id) { // Only include if ID is not empty
|
||
imageElements.push(img);
|
||
imageIds.push(id);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
if (hardCacheEnabled) {
|
||
checkImageStatus();
|
||
}
|
||
// After appending new images, ensure the page is scrollable
|
||
ensureScrollable();
|
||
} else {
|
||
// No more images to load
|
||
noMoreImages = true;
|
||
}
|
||
isFetching = false;
|
||
})
|
||
.catch(error => {
|
||
console.error('Error fetching next page:', error);
|
||
isFetching = false;
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Function to check image status via AJAX
|
||
*/
|
||
function checkImageStatus() {
|
||
if (!hardCacheEnabled) return;
|
||
if (imageIds.length === 0) {
|
||
// No images to check, do nothing
|
||
return;
|
||
}
|
||
|
||
// Send AJAX request to check image status
|
||
fetch(`/image_status?image_ids=${imageIds.join(',')}`)
|
||
.then(response => response.json())
|
||
.then(statusMap => {
|
||
imageElements = imageElements.filter(img => {
|
||
let id = img.getAttribute('data-id');
|
||
if (statusMap[id]) {
|
||
// Image is ready, update src
|
||
img.src = statusMap[id];
|
||
img.onerror = function() {
|
||
handleImageError(img);
|
||
};
|
||
// Remove the image id from the list
|
||
imageIds = imageIds.filter(imageId => imageId !== id);
|
||
return false; // Remove img from imageElements
|
||
}
|
||
return true; // Keep img in imageElements
|
||
});
|
||
// After updating images, ensure the page is scrollable
|
||
ensureScrollable();
|
||
})
|
||
.catch(error => {
|
||
console.error('Error checking image status:', error);
|
||
});
|
||
}
|
||
|
||
// Initialize imageElements and imageIds
|
||
if (hardCacheEnabled) {
|
||
imageElements = Array.from(document.querySelectorAll('img[data-id]'));
|
||
imageIds = imageElements
|
||
.map(img => img.getAttribute('data-id'))
|
||
.filter(id => id); // Exclude empty IDs
|
||
|
||
// Replace images with placeholders
|
||
imageElements.forEach(img => {
|
||
img.src = '/static/images/placeholder.svg';
|
||
});
|
||
|
||
// Start checking image status
|
||
let imageStatusTimer = setInterval(checkImageStatus, imageStatusInterval);
|
||
checkImageStatus(); // Initial check
|
||
|
||
// After initial images are loaded, ensure the page is scrollable
|
||
window.addEventListener('load', ensureScrollable);
|
||
}
|
||
|
||
// Infinite scrolling
|
||
window.addEventListener('scroll', function() {
|
||
if (isFetching || noMoreImages) return;
|
||
|
||
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - scrollThreshold) {
|
||
// User scrolled near the bottom
|
||
fetchNextPage();
|
||
}
|
||
});
|
||
|
||
// Remove 'js-enabled' class from content
|
||
document.getElementById('content').classList.remove('js-enabled');
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html> |