## Loading Behavior Product: Lazyline – Innovative Lazy-Load & LQIP WordPress Plugin URL: https://hub.jkdevstudio.com/docs/lazyline/settings-reference/loading-behavior Updated: 2026-09-06 Summary: When and how lazy loading triggers — viewport threshold distance, load delay, fade-in transition speed, and scroll direction detection. These settings control when and how lazy loading triggers. Getting the viewport threshold right is the most impactful thing you can tune for Core Web Vitals.

## Core Settings

Setting	Description	Default
Viewport Threshold	Distance in pixels from the viewport edge at which loading starts. Higher values preload earlier	`300px`
Native Lazy Loading	Use the browser built-in `loading="lazy"` attribute instead of JavaScript. Faster but less control	Off
Cancel on Exit	If an element leaves the viewport before loading completes, cancel the request. Saves bandwidth on fast scrolling	On
Frontend Watcher	Monitors AJAX content changes and applies lazy loading to dynamically added elements	On
Back to Default	After an image loads, unwrap the `.lazyline-wrapper` div and restore the original HTML structure	On

**Viewport Threshold** of `300px` works well for most sites. Drop it to `100-150px` for more aggressive lazy loading (images load closer to when they're actually visible). Increase it if images sometimes appear blank after fast scrolling.

**Native Lazy Loading** is the simplest option - no JavaScript, no wrapper elements - but it disables LQIP placeholders and preloader animations. Use it if you don't need those features and want the lowest possible overhead.

**Frontend Watcher** is essential if your site uses infinite scroll, AJAX-loaded tabs, or any dynamic content. It re-applies lazy loading to any new elements added to the page after initial load.

## Dev Mode Enable **Dev Mode** to stream lazy load events to the browser console - useful when diagnosing why specific images aren't loading: - `ENTERED` - element entered the viewport - `LOADING` - load started - `LOADED` - load completed successfully - `ERROR` - load failed - `CANCEL` - load cancelled (element left viewport before loading finished)

Disable Dev Mode in production - it adds console output on every image load and is only intended for debugging.