From ad9c7e0a551ac0e5552f80fa1ae365e484b71116 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Sat, 23 Jan 2021 01:01:02 +0100 Subject: [PATCH 1/2] fix(b-img-lazy): `blank` placeholder for Firefox --- src/components/image/img-lazy.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/image/img-lazy.js b/src/components/image/img-lazy.js index fa8d0a84705..08bb26a8463 100644 --- a/src/components/image/img-lazy.js +++ b/src/components/image/img-lazy.js @@ -23,7 +23,6 @@ const imgProps = omit(BImgProps, ['blank']) export const props = makePropsConfigurable( { ...imgProps, - blankColor: makeProp(PROP_TYPE_STRING, 'transparent'), blankHeight: makeProp(PROP_TYPE_NUMBER_STRING), // If `null`, a blank image is generated blankSrc: makeProp(PROP_TYPE_STRING, null), @@ -71,14 +70,14 @@ export const BImgLazy = /*#__PURE__*/ Vue.extend({ .filter(identity) .join(',') - return !this.blankSrc || this.isShown ? srcset : null + return srcset && (!this.blankSrc || this.isShown) ? srcset : null }, computedSizes() { const sizes = concat(this.sizes) .filter(identity) .join(',') - return !this.blankSrc || this.isShown ? sizes : null + return sizes && (!this.blankSrc || this.isShown) ? sizes : null } }, watch: { @@ -90,7 +89,7 @@ export const BImgLazy = /*#__PURE__*/ Vue.extend({ this.isShown = visible // Ensure the show prop is synced (when no `IntersectionObserver`) - if (visible !== newValue) { + if (newValue !== visible) { this.$nextTick(this.updateShowProp) } } @@ -124,7 +123,7 @@ export const BImgLazy = /*#__PURE__*/ Vue.extend({ // We only add the visible directive if we are not shown directives.push({ // Visible directive will silently do nothing if - // IntersectionObserver is not supported + // `IntersectionObserver` is not supported name: 'b-visible', // Value expects a callback (passed one arg of `visible` = `true` or `false`) value: this.doShow, @@ -147,8 +146,8 @@ export const BImgLazy = /*#__PURE__*/ Vue.extend({ blank: this.computedBlank, width: this.computedWidth, height: this.computedHeight, - srcset: this.computedSrcset || null, - sizes: this.computedSizes || null + srcset: this.computedSrcset, + sizes: this.computedSizes } }) } From cf48a4bef0aefcee6339a576f10b34fee7d09463 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Sat, 23 Jan 2021 01:13:47 +0100 Subject: [PATCH 2/2] Update img-lazy.js --- src/components/image/img-lazy.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/image/img-lazy.js b/src/components/image/img-lazy.js index 08bb26a8463..6aace5dd50d 100644 --- a/src/components/image/img-lazy.js +++ b/src/components/image/img-lazy.js @@ -4,6 +4,7 @@ import { HAS_INTERACTION_OBSERVER_SUPPORT } from '../../constants/env' import { MODEL_EVENT_NAME_PREFIX } from '../../constants/events' import { PROP_TYPE_BOOLEAN, PROP_TYPE_NUMBER_STRING, PROP_TYPE_STRING } from '../../constants/props' import { concat } from '../../utils/array' +import { requestAF } from '../../utils/dom' import { identity } from '../../utils/identity' import { toInteger } from '../../utils/number' import { omit } from '../../utils/object' @@ -113,7 +114,11 @@ export const BImgLazy = /*#__PURE__*/ Vue.extend({ // If IntersectionObserver is not supported, the callback // will be called with `null` rather than `true` or `false` if ((visible || visible === null) && !this.isShown) { - this.isShown = true + // In a `requestAF()` to render the `blank` placeholder properly + // for fast loading images in some browsers (i.e. Firefox) + requestAF(() => { + this.isShown = true + }) } } },