Difference between JavaScript and Native lazy loading?

JavaScript lazy loading

JavaScript lazy loading uses intersectionObserver to detect elements in the viewport and lazy load them.

Pros:

  • Supported by all major browsers

Cons:

  • Lower performance compared to native
  • Requires JavaScript

Browser Native lazy loading

Native lazy loading gives the best performance since it doesn't rely on JavaScript. This is supported in all browsers like Chrome, Firefox, Edge.

The threshold of lazy loading is determined by the browser based on several factors like connection speed, data saver mode, etc.

Pros:

  • Fast, performant
  • Less chance of conflicts

Cons:

  • Higher thresholds
  • Not supported in Safari and Opera

You can read more about native lazy loading here: https://web.dev/native-lazy-loading/