tune

Author: trueadm

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -2034,9 +2034,9 @@ export const template_visitors = {
 			}
 		}
 
-		// For FF we need to apply the src and loading attributes after the element is appended to the document
+		// Apply the src and loading attributes for <img> elements after the element is appended to the document
 		if (img_might_be_lazy) {
-			context.state.after_update.push(b.stmt(b.call('$.handle_ff_lazy_img', node_id)));
+			context.state.after_update.push(b.stmt(b.call('$.handle_lazy_img', node_id)));
 		}
 
 		// class/style directives must be applied last since they could override class/style attributes

packages/svelte/src/internal/client/dom/elements/attributes.js

@@ -39,7 +39,9 @@ export function set_attribute(element, attribute, value) {
 		attributes[attribute] = element.getAttribute(attribute);
 
 		if (attribute === 'src' || attribute === 'href' || attribute === 'srcset') {
-			check_src_in_dev_hydration(element, attribute, value);
+			if (attribute === 'src' && /** @type {HTMLImageElement} */ (element).loading !== 'lazy') {
+				check_src_in_dev_hydration(element, attribute, value);
+			}
 
 			// If we reset these attributes, they would result in another network request, which we want to avoid.
 			// We assume they are the same between client and server as checking if they are equal is expensive
@@ -338,16 +340,17 @@ function srcset_url_equal(element, srcset) {
  * @param {HTMLImageElement} element
  * @returns {void}
  */
-export function handle_ff_lazy_img(element) {
-	// If we're using Firefox and the image has a lazy loading attribute, we need to
-	// apply this attribute, along with the src, after it has been appended to the document
-	// otherwise the lazy behaviour will not work due to our cloneNode heuristic for templates.
-	if (/Firefox/.test(navigator.userAgent) && element.getAttribute('loading') === 'lazy') {
+export function handle_lazy_img(element) {
+	// If we're using an image that has a lazy loading attribute, we need to apply
+	// the loading and src after the img element has been appended to the document.
+	// Otherwise the lazy behaviour will not work due to our cloneNode heuristic for
+	// templates.
+	if (element.loading === 'lazy') {
 		var src = element.src;
 		element.removeAttribute('loading');
 		element.removeAttribute('src');
-		requestIdleCallback(() => {
-			element.setAttribute('loading', 'lazy');
+		requestAnimationFrame(() => {
+			element.loading = 'lazy';
 			element.src = src;
 		});
 	}

packages/svelte/src/internal/client/dom/hydration.js

@@ -40,7 +40,7 @@ export function hydrate_anchor(node) {
 	var current = /** @type {Node | null} */ (node);
 
 	// TODO this could have false positives, if a user comment consisted of `[`. need to tighten that up
-	if (/** @type {Comment} */ (current)?.data !== HYDRATION_START) {
+	if (/** @type {Comment} */ (current).data !== HYDRATION_START) {
 		return node;
 	}
 

packages/svelte/src/internal/client/index.js

@@ -27,7 +27,7 @@ export {
 	set_custom_element_data,
 	set_dynamic_element_attributes,
 	set_xlink_attribute,
-	handle_ff_lazy_img
+	handle_lazy_img
 } from './dom/elements/attributes.js';
 export { set_class, set_svg_class, set_mathml_class, toggle_class } from './dom/elements/class.js';
 export { event, delegate } from './dom/elements/events.js';