feat(js): implement intersection observer lazy loading for adsense

- Add per-slot lazy loading with Intersection Observer API
- Implement fill detection via MutationObserver and data-ad-status
- Add configurable rootMargin and fillTimeout from database
- Generate dynamic CSS based on lazy_loading_enabled setting
- Add legacy mode fallback for browsers without IO support
- Include backup of previous implementation (adsense-loader.legacy.js)
- Add OpenSpec documentation with test plan (72 tests verified)

Schema changes:
- Add lazy_loading_enabled (boolean, default: true)
- Add lazy_rootmargin (select: 0-500px, default: 200)
- Add lazy_fill_timeout (select: 3000-10000ms, default: 5000)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-12-10 15:48:20 -06:00
parent 555541b2a0
commit 179a83e9cd
14 changed files with 3303 additions and 201 deletions

View File

@@ -489,6 +489,18 @@ function roi_enqueue_adsense_loader() {
'strategy' => 'defer',
)
);
// Pasar configuración de lazy loading a JavaScript
$lazy_enabled = roi_get_component_setting('adsense-placement', 'behavior', 'lazy_loading_enabled', true);
$lazy_rootmargin = roi_get_component_setting('adsense-placement', 'behavior', 'lazy_rootmargin', '200');
$lazy_fill_timeout = roi_get_component_setting('adsense-placement', 'behavior', 'lazy_fill_timeout', '5000');
wp_localize_script('roi-adsense-loader', 'roiAdsenseConfig', array(
'lazyEnabled' => (bool) $lazy_enabled,
'rootMargin' => (int) $lazy_rootmargin . 'px 0px',
'fillTimeout' => (int) $lazy_fill_timeout,
'debug' => defined('WP_DEBUG') && WP_DEBUG,
));
}
add_action('wp_enqueue_scripts', 'roi_enqueue_adsense_loader', 10);