├── .gitignore
├── LICENSE
├── README.md
├── VueLazyBackgroundImage.vue
├── main.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | 
 6 | # Dependency directories
 7 | node_modules
 8 | 
 9 | # Optional npm cache directory
10 | .npm
11 | 
12 | # ide files
13 | .orig
14 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 Darryn Ten
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Lazy Background Images for Vue
 2 | ![npm version](https://badge.fury.io/js/vue-lazy-background-images.svg)
 3 | 
 4 | #### vue-lazy-background-images
 5 | 
 6 | A simple Vue component for lazy loading background components.
 7 | 
 8 | This component is *only* for background images and does not support anything
 9 | other than that.
10 | 
11 | ## Installation
12 | 
13 | ```bash
14 | npm install --save-dev vue-lazy-background-images
15 | ```
16 | 
17 | ## Usage
18 | 
19 | Import the component
20 | 
21 | ```js
22 | import VueLazyBackgroundImage from 'vue-lazy-background-images'
23 | ```
24 | 
25 | Register the component
26 | 
27 | ```js
28 | Vue.component('lazy-background', VueLazyBackgroundImage)
29 | ```
30 | 
31 | And put into your DOM
32 | 
33 | ```html
34 | <lazy-background
35 |   :image-source="backgroundImage"
36 |   loading-image="/img/loading.svg"
37 |   error-image="/img/error.png"
38 |   image-class="cam-viewport"
39 |   background-size="cover"
40 |   :image-success-callback="successCallback"
41 |   :image-error-callback="errorCallback">
42 | </lazy-background>
43 | ```
44 | 
45 | And get this out
46 | 
47 | ```html
48 | <div data-width="640" data-height="360" data-state="loaded" class="cam-viewport loaded" style="background-image: url(http://my-site.com/test-image.png); background-size: cover"></div>
49 | ```
50 | 
51 | You can see the image-source in the above example is a computed property,
52 | although it doesn't have to be.
53 | 
54 | The callbacks in the above example are bound to data()
55 | 
56 | Width and height are for the *image* not the containing div.
57 | 
58 | ## Values
59 | 
60 | * image-source - The source of the desired image (required)
61 | * loading-image - Path to the loader image (png, svg etc) (required)
62 | * error-image - Path to the error image (required)
63 | * image-class - Any classes you wish to include on the image (optional)
64 | * background-size - CSS background-size value (optional, default is `cover`)
65 | * image-success-callback - Function on success (optional)
66 | * image-error-callback - Function on error (optional)
67 | 
68 | ## Details
69 | 
70 | #### Knowing state
71 | 
72 | The component attaches its state as a class, as well as a data- attribute
73 | called `state`
74 | 
75 | There are 3 states, loading, loaded, and error
76 | 
77 | There are no events that get emitted, you can access either the classlist or
78 | the dataset to see what state your image is in.
79 | 
80 | #### Image size
81 | 
82 | There will be 2x data- attributes on your rendered - `width` and `height` which
83 | is the dimensions of the actual image (not the rendered div)
84 | 
85 | #### Background size
86 | 
87 | This is `cover` by default although it can be overridden.
88 | 
89 | #### Callbacks
90 | 
91 | You can pass in events to trigger on success and failure. These are completely
92 | optional and are not required for this to work.
93 | 
94 | #### Notes
95 | 
96 | Contributions welcome, as long as they are related to background images. Enjoy
97 | the component
98 | 
99 | 


--------------------------------------------------------------------------------
/VueLazyBackgroundImage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div :class="[imageClass, imageState]" :style="computedStyle" :data-width="imageWidth" :data-height="imageHeight" :data-state="imageState"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   props: {
 8 |     imageSource: {
 9 |       type: String,
10 |       required: true
11 |     },
12 |     imageClass: {
13 |       type: String,
14 |       required: false,
15 |       default: ''
16 |     },
17 |     loadingImage: {
18 |       type: String,
19 |       required: true
20 |     },
21 |     errorImage: {
22 |       type: String,
23 |       required: true
24 |     },
25 |     imageErrorCallback: {
26 |       type: Function,
27 |       required: false,
28 |       default: function() {}
29 |     },
30 |     imageSuccessCallback: {
31 |       type: Function,
32 |       required: false,
33 |       default: function() {}
34 |     },
35 |     backgroundSize: {
36 |       type: String,
37 |       required: false,
38 |       default: 'cover'
39 |     }
40 |   },
41 |   data() {
42 |     return {
43 |       imageWidth: 0,
44 |       imageHeight: 0,
45 |       imageState: 'loading',
46 |       asyncImage: new Image()
47 |     }
48 |   },
49 |   computed: {
50 |     computedStyle() {
51 |       if (this.imageState === 'loading') {
52 |         return 'background-image: url(' + this.loadingImage + ');'
53 |       }
54 | 
55 |       if (this.imageState === 'error') {
56 |         return 'background-image: url(' + this.errorImage + ');'
57 |       }
58 | 
59 |       if (this.imageState === 'loaded') {
60 |         return 'background-image: url(' + this.asyncImage.src + '); background-size: ' + this.backgroundSize
61 |       }
62 | 
63 |       return '';
64 |     }
65 |   },
66 |   methods: {
67 |     fetchImage(url) {
68 |       this.asyncImage.onload = this.imageOnLoad
69 |       this.asyncImage.onerror = this.imageOnError
70 |       this.imageState = 'loading'
71 |       this.asyncImage.src = this.imageSource
72 |     },
73 |     imageOnLoad(success) {
74 |       this.imageState = 'loaded'
75 |       this.imageWidth =  this.asyncImage.naturalWidth
76 |       this.imageHeight = this.asyncImage.naturalHeight
77 |       this.imageSuccessCallback()
78 |     },
79 |     imageOnError(error) {
80 |       this.imageState = 'error'
81 |       this.imageErrorCallback()
82 |     }
83 |   },
84 |   mounted() {
85 |     this.$nextTick(() => {
86 |       this.fetchImage()
87 |     })
88 |   }
89 | }
90 | </script>
91 | 


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | import VueLazyBackgroundImage from './VueLazyBackgroundImage.vue'
2 | module.exports = VueLazyBackgroundImage
3 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-lazy-background-images",
 3 |   "version": "1.0.0",
 4 |   "description": "Lazy background images. Only background images.",
 5 |   "main": "main.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "git+https://github.com/darrynten/vue-lazy-background-images.git"
 9 |   },
10 |   "keywords": [
11 |     "vue",
12 |     "vuejs",
13 |     "vue2",
14 |     "lazy loading",
15 |     "images",
16 |     "background images",
17 |     "loader",
18 |     "backgrounds"
19 |   ],
20 |   "author": "Darryn Ten",
21 |   "license": "MIT",
22 |   "bugs": {
23 |     "url": "https://github.com/darrynten/vue-lazy-background-images/issues"
24 |   },
25 |   "homepage": "https://github.com/darrynten/vue-lazy-background-images#readme"
26 | }
27 | 


--------------------------------------------------------------------------------