Smart Loader for Image-Based Chapters: Smoother Reading Without Compromising Performance

The problem with default lazy loading

For image-heavy chapters, especially webtoons with tall images, native lazy loading often results in visible delays when scrolling. Readers experience noticeable lag as each image loads only when it’s already within or near the viewport.

How Smart Loader solves it

Smart Loader proactively preloads images before the reader scrolls to them. It detects scrolling behavior and loads upcoming images in advance. When fast scrolling is detected, it switches to aggressive preloading, ensuring the entire chapter is ready before the reader catches up.

Zero impact on PageSpeed

All images maintain their defined width and height attributes, eliminating layout shifts (CLS). Placeholder SVGs are used during preload to avoid visual jumps, and the script respects Core Web Vitals requirements.

Compatible with encrypted chapters

If chapter content is encrypted (e.g. using AES), Smart Loader intelligently waits for decryption to complete before initializing. This ensures it can handle images inserted dynamically after the DOM is updated.

Only applies to image-based chapters

Smart Loader is encapsulated in its own file, smart-loader.js, and is only enqueued when the chapter’s type is comic. This avoids unnecessary script loading for text-based chapters like novels.

Conditional enqueue example

if ($type === 'comic') {
    wp_enqueue_script(
        'init-smart-loader',
        "$theme_uri/assets/js/smart-loader.js",
        [],
        wp_get_theme()->get('Version'),
        true
    );
}

Smooth visual transitions

The system uses data-loading and data-loaded attributes to apply smooth CSS transitions between loading and loaded states. This ensures a seamless and polished reading experience without the need for inline JavaScript styling.

Improved reader experience and retention

By eliminating load delays and ensuring images appear instantly as readers scroll, Smart Loader delivers an app-like experience on the web. This keeps readers engaged longer, especially on image-intensive chapters.

Benefits summary

• Seamless image loading without delay
• Preloads upcoming images intelligently
• No impact on PageSpeed or CLS
• Only active on comic-type chapters
• Fully compatible with encrypted chapter content
• Modular and easy to maintain

What’s new in 1.2.1 (related items)

• Added smart lazyload for image-based chapters – preloads ahead for smoother reading without affecting PageSpeed.
• Separated smart-loader.js and only enqueued it when type = comic, ensuring novel chapters remain unaffected.

Ready to upgrade

If you’re using Init Manga and publish image-based chapters, Smart Loader in version 1.2.1 will deliver an immediately noticeable upgrade to your reading experience. No configuration is needed – simply enable the image-based layout and let Smart Loader do the rest.