Fixed loading: "lazy" not working on Safari and Firefox.

- `loading: "lazy"` must go before `src`, or else it gets ignored.
This commit is contained in:
Christian Bastian
2024-04-07 12:22:59 -04:00
parent 8016f2a8d3
commit a239ccca2a

View File

@@ -445,9 +445,9 @@ class ImageSelect {
const el_defaultPreviewNoImage = $el("img", { const el_defaultPreviewNoImage = $el("img", {
$: (el) => (this.elements.defaultPreviewNoImage = el), $: (el) => (this.elements.defaultPreviewNoImage = el),
loading: "lazy", /* `loading` BEFORE `src`; Known bug in Firefox 124.0.2 and Safari for iOS 17.4.1 (https://stackoverflow.com/a/76252772) */
src: PREVIEW_NONE_URI, src: PREVIEW_NONE_URI,
style: { display: "none" }, style: { display: "none" },
loading: "lazy",
}); });
const el_defaultPreviews = $el("div", { const el_defaultPreviews = $el("div", {
@@ -459,9 +459,9 @@ class ImageSelect {
}, (() => { }, (() => {
const imgs = defaultPreviews.map((url) => { const imgs = defaultPreviews.map((url) => {
return $el("img", { return $el("img", {
loading: "lazy", /* `loading` BEFORE `src`; Known bug in Firefox 124.0.2 and Safari for iOS 17.4.1 (https://stackoverflow.com/a/76252772) */
src: url, src: url,
style: { display: "none" }, style: { display: "none" },
loading: "lazy",
onerror: (e) => { onerror: (e) => {
e.target.src = el_defaultUri.dataset.noimage ?? PREVIEW_NONE_URI; e.target.src = el_defaultUri.dataset.noimage ?? PREVIEW_NONE_URI;
}, },
@@ -1599,6 +1599,7 @@ class ModelGrid {
); );
return $el("div.item", {}, [ return $el("div.item", {}, [
$el("img.model-preview", { $el("img.model-preview", {
loading: "lazy", /* `loading` BEFORE `src`; Known bug in Firefox 124.0.2 and Safari for iOS 17.4.1 (https://stackoverflow.com/a/76252772) */
src: imageUri( src: imageUri(
previewInfo?.path, previewInfo?.path,
previewInfo?.dateModified, previewInfo?.dateModified,
@@ -1606,7 +1607,6 @@ class ModelGrid {
PREVIEW_THUMBNAIL_HEIGHT, PREVIEW_THUMBNAIL_HEIGHT,
), ),
draggable: false, draggable: false,
loading: "lazy",
}), }),
$el("div.model-preview-overlay", { $el("div.model-preview-overlay", {
ondragend: (e) => dragAdd(e), ondragend: (e) => dragAdd(e),