diff --git a/packages/saber-plugin-image/lib/saber-browser.js b/packages/saber-plugin-image/lib/saber-browser.js index 17f9599b4..c87e0628a 100644 --- a/packages/saber-plugin-image/lib/saber-browser.js +++ b/packages/saber-plugin-image/lib/saber-browser.js @@ -14,9 +14,12 @@ export default ({ Vue }) => { if ($el.dataset.src || $el.dataset.srcset) { lozad($el, { loaded: el => { - this.removeBlendIn = setTimeout(() => { - el.classList.remove(styles.blendIn) - }, 300) + el.addEventListener('load', () => { + el.setAttribute('data-lazy-loaded', '') + this.removeBlendIn = setTimeout(() => { + el.classList.remove(styles.blendIn) + }, 300) + }) } }).observe() } diff --git a/packages/saber-plugin-image/lib/styles.module.css b/packages/saber-plugin-image/lib/styles.module.css index f8bb374d0..9c15f9d1c 100644 --- a/packages/saber-plugin-image/lib/styles.module.css +++ b/packages/saber-plugin-image/lib/styles.module.css @@ -4,6 +4,6 @@ filter: blur(5px); } -.blendIn[data-loaded="true"] { +.blendIn[data-lazy-loaded] { filter: none; }