+12
-8
lines changedFilter options
+12
-8
lines changed Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@ import { HAS_INTERACTION_OBSERVER_SUPPORT } from '../../constants/env'
4 4
import { MODEL_EVENT_NAME_PREFIX } from '../../constants/events'
5 5
import { PROP_TYPE_BOOLEAN, PROP_TYPE_NUMBER_STRING, PROP_TYPE_STRING } from '../../constants/props'
6 6
import { concat } from '../../utils/array'
7 +
import { requestAF } from '../../utils/dom'
7 8
import { identity } from '../../utils/identity'
8 9
import { toInteger } from '../../utils/number'
9 10
import { omit } from '../../utils/object'
@@ -23,7 +24,6 @@ const imgProps = omit(BImgProps, ['blank'])
23 24
export const props = makePropsConfigurable(
24 25
{
25 26
...imgProps,
26 -
blankColor: makeProp(PROP_TYPE_STRING, 'transparent'),
27 27
blankHeight: makeProp(PROP_TYPE_NUMBER_STRING),
28 28
// If `null`, a blank image is generated
29 29
blankSrc: makeProp(PROP_TYPE_STRING, null),
@@ -71,14 +71,14 @@ export const BImgLazy = /*#__PURE__*/ Vue.extend({
71 71
.filter(identity)
72 72
.join(',')
73 73 74 -
return !this.blankSrc || this.isShown ? srcset : null
74 +
return srcset && (!this.blankSrc || this.isShown) ? srcset : null
75 75
},
76 76
computedSizes() {
77 77
const sizes = concat(this.sizes)
78 78
.filter(identity)
79 79
.join(',')
80 80 81 -
return !this.blankSrc || this.isShown ? sizes : null
81 +
return sizes && (!this.blankSrc || this.isShown) ? sizes : null
82 82
}
83 83
},
84 84
watch: {
@@ -90,7 +90,7 @@ export const BImgLazy = /*#__PURE__*/ Vue.extend({
90 90
this.isShown = visible
91 91 92 92
// Ensure the show prop is synced (when no `IntersectionObserver`)
93 -
if (visible !== newValue) {
93 +
if (newValue !== visible) {
94 94
this.$nextTick(this.updateShowProp)
95 95
}
96 96
}
@@ -114,7 +114,11 @@ export const BImgLazy = /*#__PURE__*/ Vue.extend({
114 114
// If IntersectionObserver is not supported, the callback
115 115
// will be called with `null` rather than `true` or `false`
116 116
if ((visible || visible === null) && !this.isShown) {
117 -
this.isShown = true
117 +
// In a `requestAF()` to render the `blank` placeholder properly
118 +
// for fast loading images in some browsers (i.e. Firefox)
119 +
requestAF(() => {
120 +
this.isShown = true
121 +
})
118 122
}
119 123
}
120 124
},
@@ -124,7 +128,7 @@ export const BImgLazy = /*#__PURE__*/ Vue.extend({
124 128
// We only add the visible directive if we are not shown
125 129
directives.push({
126 130
// Visible directive will silently do nothing if
127 -
// IntersectionObserver is not supported
131 +
// `IntersectionObserver` is not supported
128 132
name: 'b-visible',
129 133
// Value expects a callback (passed one arg of `visible` = `true` or `false`)
130 134
value: this.doShow,
@@ -147,8 +151,8 @@ export const BImgLazy = /*#__PURE__*/ Vue.extend({
147 151
blank: this.computedBlank,
148 152
width: this.computedWidth,
149 153
height: this.computedHeight,
150 -
srcset: this.computedSrcset || null,
151 -
sizes: this.computedSizes || null
154 +
srcset: this.computedSrcset,
155 +
sizes: this.computedSizes
152 156
}
153 157
})
154 158
}
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4