diff options
author | uPagge <git@upagge.ru> | 2021-02-24 16:14:48 +0300 |
---|---|---|
committer | uPagge <git@upagge.ru> | 2021-02-24 16:14:48 +0300 |
commit | e00caf74f93dae9fccae6b0fc0549ad9af60e972 (patch) | |
tree | 035f7ec848c4524c376a7ec9e830caec87f6869c /layouts | |
parent | e69f3980488666fe43d17139f633c2f9c5f2377e (diff) |
lazy
Diffstat (limited to 'layouts')
-rw-r--r-- | layouts/partials/plugin/image.html | 12 | ||||
-rw-r--r-- | layouts/posts/single.html | 11 |
2 files changed, 14 insertions, 9 deletions
diff --git a/layouts/partials/plugin/image.html b/layouts/partials/plugin/image.html index 3275f87..2f095f8 100644 --- a/layouts/partials/plugin/image.html +++ b/layouts/partials/plugin/image.html @@ -20,20 +20,16 @@ <picture> {{- if .Linked -}} <a target="_blank" class="lightgallery" href="{{ $large | safeURL }}" title="{{ .Title | default $alt }}" data-thumbnail="{{ $small | safeURL }}"{{ with .Caption }} data-sub-html="<h2>{{ . }}</h2>{{ with $.Title }}<p>{{ . }}</p>{{ end }}"{{ end }}{{ with .Rel }} rel="{{ . }}"{{ end }}> - <img decoding="async" + <img class="lozad" - srcset="{{ .ImagePlug | safeURL }}" - src="{{ .Src | safeURL }}" - data-srcset="{{ .Src | safeURL }}" + data-src="{{ .Src | safeURL }}" alt="{{ $alt }}"{{ with .Height }} height="{{ . }}"{{ end }}{{ with .Width }} width="{{ . }}"{{ end }} /> </a> {{- else -}} - <img decoding="async" - src="{{ .Src | safeURL }}" + <img class="lozad" - srcset="{{ .ImagePlug | safeURL }}" - data-srcset="{{ .Src | safeURL }}" + data-src="{{ .Src | safeURL }}" alt="{{ $alt }}" title="{{ .Title | default $alt }}"{{ with .Height }} height="{{ . }}"{{ end }}{{ with .Width }} width="{{ . }}"{{ end }} /> diff --git a/layouts/posts/single.html b/layouts/posts/single.html index de91b88..dac7463 100644 --- a/layouts/posts/single.html +++ b/layouts/posts/single.html @@ -294,7 +294,16 @@ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script> <script> - const observer = lozad(); + var observer = lozad('.lozad', { + threshold: 0.1, + enableAutoReload: true, + load: function(el) { + el.src = el.getAttribute("data-src"); + el.onload = function() { + toastr["success"](el.localName.toUpperCase() + " " + el.getAttribute("data-index") + " lazy loaded.") + } + } + }) observer.observe(); </script> {{- end -}}
\ No newline at end of file |