Smart LazyLoad – Lazy Load Images, Videos and Iframes
| 开发者 |
jumedeenkhan
mozedia |
|---|---|
| 更新时间 | 2026年8月2日 22:04 |
| 捐献地址: | 去捐款 |
| PHP版本: | 7.2 及以上 |
| WordPress版本: | 7.0.2 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
<picture> sources, background images, native HTML5 videos, and iframes (including YouTube, vimeo) until they are about to enter the viewport.
Built with a lightweight, dependency-free frontend engine, Smart LazyLoad uses modern browser APIs without requiring jQuery or other third-party libraries. It also includes native browser lazy loading support, smooth loading effects, and intelligent defaults, so it works well immediately after activation.
Unlike most lazy load plugins, Smart LazyLoad gives you two levels of control. A global Master Switch lets you enable or disable lazy loading across your entire website, while a per-post override allows individual posts and pages to follow the global setting or force lazy loading on or off when needed.
Everything is managed from a clean, modern settings page where you can choose what to lazy load, fine-tune performance, customize placeholders and animations, and exclude specific elements for maximum compatibility.
安装:
- Navigate to Plugins → Add New Plugin
- Search for Smart LazyLoad
- Click Install Now, then Activate
- Go to Settings → LazyLoad to review the defaults — lazy loading for images is already on out of the box
- Download the plugin's ZIP file
- Upload the
lazy-load-for-imagesfolder to/wp-content/plugins/ - Activate the plugin from Plugins → Installed Plugins
- Visit Settings → LazyLoad to adjust anything, or leave the defaults as they are
屏幕截图:
常见问题:
What exactly does Smart LazyLoad defer?
Images inside post/page content, featured images, widget images, avatars, <picture> sources, CSS/inline background images, iframes (YouTube, Vimeo, and others), and native <video> elements. Each content type has its own on/off toggle, so you decide what applies.
How is this different from a plugin that only lazy loads images?
Most lazy load plugins stop at <img> tags. Smart LazyLoad also handles background images, <picture> responsive sources, videos, and iframes, and adds a second layer of control on top of the usual site-wide switch: a per-post override that lets a single page behave differently from the rest of the site.
Does this work with AMP pages?
Yes, safely: on any page served through the AMP plugin, Smart LazyLoad detects the AMP endpoint and skips lazy loading entirely — including its scripts and styles — since AMP's markup rules don't allow the attributes lazy loading needs. Non-AMP pages are unaffected.
How do I make one specific post behave differently from the rest of the site?
Open that post or page in the editor and find the Smart LazyLoad panel in the sidebar. Set the Lazy Load dropdown to Enable to force lazy loading on for that post only, or Disable to force it off — either way, every other post keeps following the site-wide Master Switch untouched.
If I turn the Master Switch off, do I lose my other settings?
No. Every other option on the settings page is dimmed and can't be edited while the Master Switch is off, but its saved value is untouched. Turn the Master Switch back on and your previous configuration is exactly as you left it.
How do I exclude one image, video, or iframe from being lazy loaded?
Add any of these to the element: no-lazyload, skip-lazy, data-no-lazy, or data-skip-lazy. For your own classes or attributes, list them (comma-separated) under Settings → LazyLoad → Custom Exclude Selectors — no code needed.
Can I disable lazy loading with code instead of the settings page?
Yes.
add_filter( 'do_smart_lazyload', '__return_false' );
Or conditionally, for example only on single posts:
add_action( 'wp', function () { if ( is_single() ) { add_filter( 'do_smart_lazyload', '__return_false' ); } } );
Does it support background images?
Yes, in two ways. Automatically, for any element using the inline style attribute: ` ` Or manually, using the plugin's own markup convention: ` `
Does it support responsive <picture> markup?
Yes. Every <source> inside a <picture> element has its srcset/sizes deferred in sync with the fallback <img>. The browser still decides which source to use based on format and viewport — Smart LazyLoad only changes when the chosen source loads.
What is the low-quality image placeholder (LQIP)?
When turned on, Smart LazyLoad shows a tiny, blurred version of the real image (generated from a registered thumbnail size) instead of an empty box while the full image loads. It's generated once per image, cached, and reused on every later page view. Choose the source size under Settings → LazyLoad → Placeholder Source Size.
On a large, existing media library, the first visitor to view each image pays a small one-time generation cost. Avoid that entirely by pre-generating every placeholder in advance from the command line:
wp smart-lazyload generate-lqip
Add --force to regenerate placeholders that are already cached (useful after changing the Placeholder Source Size).
Can I use my own placeholder image instead of the built-in SVG?
Yes.
add_filter( 'smart_lazyload_svg_placeholder', function () { return 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"></svg>'; } );
Deferred iframes use a separate placeholder (default about:blank), which you can change with:
add_filter( 'smart_lazyload_placeholder', function () { return 'about:blank'; } );
Will this conflict with my caching, CDN, or other performance plugins?
No. Smart LazyLoad only changes the HTML markup for images, videos, and iframes on the fly; it doesn't touch how pages are cached or served, so it works alongside typical caching and CDN setups.
Is Smart LazyLoad SEO-friendly?
Yes. Deferred content is always wrapped with a working <noscript> fallback, native browser lazy loading is supported directly, and the first image on the page is skipped by default so it doesn't hurt your Largest Contentful Paint score.
Lazy loading doesn't seem to be working. What should I check?
- Confirm the Master Switch is on, and that the specific post isn't set to Disable in its Lazy Load panel
- Clear any page cache, CDN cache, or browser cache
- Check whether "Disable for Logged-in Users" is on and you're viewing the page while logged in
- Temporarily disable other lazy load plugins to rule out a conflict
- Make sure the element doesn't carry one of the exclusion classes/attributes
- View the actual frontend page, not a page-builder editing screen or preview
更新日志:
- Improved: images and sources are now detected reliably even when a theme writes multi-line or unusually spaced HTML markup
- Improved: internal code cleanup for better long-term maintainability
- Added: automatic AMP compatibility — lazy loading, its inline scripts/styles, and the enqueued frontend script/stylesheet are all skipped on AMP endpoints (detected via the AMP plugin's is_amp_endpoint()), since AMP markup validation rejects the custom classes, data attributes, and inline scripts lazy loading depends on
- Fixed: markup-like text inside existing script or noscript blocks (for example, an img tag written inside a JS string, or a manually authored noscript fallback) could be corrupted or doubled up by the lazy-load processing; such blocks are now protected and passed through untouched
- Added: a src-pattern exclusion list (smart_lazyload_excluded_src filter) so known dynamic image generators, form captchas, and common placeholder assets are never lazy-loaded, on both images and background images
- Added: retina/responsive background image support via CSS image-set()/-webkit-image-set(), or a manual data-bg-set attribute, automatically picking the best resolution for the visitor's screen
- Added: a WP-CLI command, wp smart-lazyload generate-lqip, to pre-generate low-quality image placeholders for an entire media library up front (with a --force option to regenerate)
- Fixed: the YouTube click-to-play thumbnail's aria-label was a hardcoded English string that never passed through translation functions
- Changed: the Threshold Distance field now uses the same CSS-only locking approach as the Master Switch cards (instead of the HTML disabled attribute) when Native Browser Lazy Loading is on, for a more consistent settings UI
- Changed: the YouTube click-to-play thumbnail's play button icon is now a bundled local image (assets/img/youtube.png) instead of an external request; the per-video thumbnail image itself is unaffected and still loads from YouTube
- Changed: background-image lazy loading now uses its own dedicated class, smart-background, alongside the shared smart-lazyload marker, avoiding any overlap between the two lazy-load selector groups
- New: a "Smart LazyLoad" panel in the post/page editor sidebar with a single Lazy Load dropdown (Default / Enable / Disable) to override the site-wide setting for one post at a time
- New: the settings page now dims and locks every option below the Master Switch while it's off; saved values are always preserved and reappear the moment it's switched back on
- Fixed: saving the settings form for the very first time (fresh install, or right after Reset to Defaults) could silently re-enable every checkbox regardless of what was actually checked
- Fixed: the low-quality placeholder no longer runs its image-processing step on wp-admin screens, where it had no effect but still cost CPU time
- Fixed: a stray double space left in background-image tag output after removing an empty inline style attribute
- Changed: settings-page CSS classes, IDs, and the settings page slug now use a consistent naming scheme (visual and behavior are unchanged)
- Fixed: a JavaScript error thrown on page load when the lazy-load observer initialized before
<body>existed - Fixed: background images were swapped to their real URL but never marked as loaded, leaving them invisible
- Fixed:
<picture>elements had their<img>lazy-loaded by the Images option even when the picture option was off, leaving<source>and<img>out of sync;<picture>is now handled entirely by its own toggle - Changed: trimmed the frontend script down to only the code paths this plugin uses
- Changed: Custom Exclude Selectors is now a multi-line textarea
- Changed: Placeholder Background Color now uses the native WordPress color picker
- Changed: redesigned the settings page with a card-based layout and toggle switches
- Fixed: mismatched class names between the frontend script/CSS and the PHP handlers, which had prevented lazy loading, fade-in, and the YouTube thumbnail mode from working
- Fixed: settings were saved under a different option name than the one the frontend read, so saved changes never took effect
- Fixed: a class name mismatch in the background-image handler that could trigger a fatal error
- Fixed: admin assets were enqueued from the wrong path and on the wrong admin screen
- Fixed: the Reset to Defaults button posted to a handler that didn't match its registered action
- Removed: the inline CSS/JS loading mode
- Added: an option to load the script in the footer instead of the head
- Added: lazy loading for
<picture>elements, deferring each<source>'s srcset/sizes - Added: low-quality image placeholder (LQIP) option with a cached, blurred preview
- Added: a setting to choose which registered image size generates the LQIP preview
- Changed: base CSS now ships as a small external stylesheet instead of being inlined on every page
- Added: native
<video>lazy loading, including<source>tags and poster images - Added: configurable fade-in duration (previously fixed at 0.3s)
- Added: optional placeholder background color
- Added: Custom Exclude Selectors setting
- Added: Reset to Defaults action, with capability and nonce checks
- Removed: two unused asset files left over from an earlier version
- Fixed: saving settings while native lazy loading was enabled reset the threshold value back to its default
- Readme: removed an unverifiable superlative claim from the plugin description
- Verified compatibility with WordPress 7.0.2 and PHP 8.0–8.4
- Fixed: a missing translators comment on a string with placeholders
- Added: uninstall cleanup of the plugin's settings (multisite-aware)
- Complete rewrite adding iframe, video, and background-image lazy loading
- Added: YouTube thumbnail replacement mode
- Rebuilt the admin settings page
- General performance and stability improvements
- Tested with WordPress 6.5.2
- JavaScript and PHP fixes
- Added SVG placeholder support
- Genesis framework compatibility
- Hook and filter improvements
- General bug fixes
- Initial release