diff --git a/concerns/loads-assets.coffee b/concerns/loads-assets.coffee index 50adbd6..fc433b1 100644 --- a/concerns/loads-assets.coffee +++ b/concerns/loads-assets.coffee @@ -9,6 +9,7 @@ export default default: true lazyload: Boolean placeholderColor: String + maintainPlaceholder: Boolean transition: type: String default: 'vv-fade' diff --git a/index.js b/index.js index 2ca148f..69f14bd 100644 --- a/index.js +++ b/index.js @@ -130,13 +130,19 @@ var render = function() { }) : _vm._e(), _c("transition", { attrs: { name: _vm.transition } }, [ - _vm.placeholderColor && !_vm.showImage + _vm.placeholderColor && !_vm.showImage && !_vm.maintainPlaceholder ? _c("div", { staticClass: "vv-placeholder", style: { backgroundColor: _vm.placeholderColor } }) : _vm._e() ]), + _vm.placeholderColor && !_vm.showImage && _vm.maintainPlaceholder + ? _c("div", { + staticClass: "vv-placeholder", + style: { backgroundColor: _vm.placeholderColor } + }) + : _vm._e(), _vm.image && _vm.shouldLoad ? _c( "div", @@ -374,6 +380,7 @@ Logic related to loading assets }, lazyload: Boolean, placeholderColor: String, + maintainPlaceholder: Boolean, transition: { type: String, default: 'vv-fade' diff --git a/index.vue b/index.vue index 222391e..9f30c7b 100644 --- a/index.vue +++ b/index.vue @@ -16,9 +16,14 @@ //- Show a placeholder shape until an asset is loaded transition(:name='transition') .vv-placeholder( - v-if='placeholderColor && !showImage' + v-if='placeholderColor && !showImage && !maintainPlaceholder' :style='{ backgroundColor: placeholderColor }') + //- This keeps the placeholder present + .vv-placeholder( + v-if='placeholderColor && !showImage && maintainPlaceholder' + :style='{ backgroundColor: placeholderColor }') + //- Image asset //- The wrapper constainer is needed for the object-fit polyfill .vv-wrapper(v-if='image && shouldLoad')