diff --git a/.changeset/rare-mirrors-act.md b/.changeset/rare-mirrors-act.md new file mode 100644 index 0000000000..02a60012a1 --- /dev/null +++ b/.changeset/rare-mirrors-act.md @@ -0,0 +1,5 @@ +--- +"svelte": patch +--- + +fix: better support for lazy img elements diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js index e42e1cbc65..082a6c4dee 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js @@ -1889,11 +1889,23 @@ export const template_visitors = { let is_content_editable = false; let has_content_editable_binding = false; - if (is_custom_element) { + if ( // cloneNode is faster, but it does not instantiate the underlying class of the // custom element until the template is connected to the dom, which would // cause problems when setting properties on the custom element. // Therefore we need to use importNode instead, which doesn't have this caveat. + is_custom_element || + // If we have an occurance, we need to use importNode for FF + // otherwise, the image won't be lazy. If we detect an attribute for "loading" then + // just fallback to using importNode. Also if we have a spread attribute on the img, + // then it might contain this property, so we also need to fallback there too. + (node.name === 'img' && + node.attributes.some( + (attribute) => + attribute.type === 'SpreadAttribute' || + (attribute.type === 'Attribute' && attribute.name === 'loading') + )) + ) { metadata.context.template_needs_import_node = true; } diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js index 061351bdc8..287fba88b8 100644 --- a/packages/svelte/src/internal/client/dom/template.js +++ b/packages/svelte/src/internal/client/dom/template.js @@ -251,7 +251,7 @@ export function text(anchor) { return push_template_node(node); } -export const comment = template('', TEMPLATE_FRAGMENT); +export const comment = template('', TEMPLATE_FRAGMENT | TEMPLATE_USE_IMPORT_NODE); /** * Assign the created (or in hydration mode, traversed) dom elements to the current block