Skip to content

Commit

Permalink
add: Individually error && loading assets
Browse files Browse the repository at this point in the history
  • Loading branch information
@hilongjw
hilongjw committed Sep 14, 2016
1 parent 75758ef commit 23fa6a2
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 79 deletions.
24 changes: 20 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,21 +79,37 @@ export default {

## API

**Directive**
### Directive

Basic
**Basic**

vue-lazyload will set this img element's `src` with `imgUrl`
vue-lazyload will set this img element's `src` with `imgUrl` string

```javascript
data: {
imgUrl: 'http://xx.com/logo.png'
imgUrl: 'http://xx.com/logo.png' // String
}
```
```html
<img v-lazy="imgUrl" />
```

or Object

```javascript
data: {
imgObj: {
src: 'http://xx.com/logo.png',
error: 'http://xx.com/error.png',
loading: 'http://xx.com/loading-spin.svg'
}
}
```
```html
<img v-lazy="imgObj" />
```


Elemet with background-image

```html
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vue-lazyload",
"version": "0.7.5",
"version": "0.8.0",
"description": "Vue module for lazy-loading images in your vue.js applications.",
"main": "vue-lazyload.es5.js",
"scripts": {
Expand Down
66 changes: 28 additions & 38 deletions vue-lazyload.es5.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,6 @@

var Promise = require('es6-promise').Promise;

if (!Array.prototype.find) {
Array.prototype.find = function (predicate) {
'use strict';

if (this == null) {
throw new TypeError('Array.prototype.find called on null or undefined');
}
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
var list = Object(this);
var length = list.length >>> 0;
var thisArg = arguments[1];
var value;

for (var i = 0; i < length; i++) {
value = list[i];
if (predicate.call(thisArg, value, i, list)) {
return value;
}
}
return undefined;
};
}

exports.install = function (Vue, Options) {
var isVueNext = Vue.version.split('.')[0] === '2';
var DEFAULT_PRE = 1.3;
Expand Down Expand Up @@ -112,7 +87,7 @@ exports.install = function (Vue, Options) {
if (Loaded.indexOf(listener.src) > -1) return setElRender(listener.el, listener.bindType, listener.src, 'loaded');
var rect = listener.el.getBoundingClientRect();

if ((rect.top < window.innerHeight * Init.preLoad && rect.bottom > 0) && (rect.left < window.innerWidth * Init.preLoad && rect.right > 0)) {
if (rect.top < window.innerHeight * Init.preLoad && rect.bottom > 0 && rect.left < window.innerWidth * Init.preLoad && rect.right > 0) {
render(listener);
}
};
Expand Down Expand Up @@ -140,7 +115,7 @@ exports.install = function (Vue, Options) {
setElRender(item.el, item.bindType, item.src, 'loaded');
Loaded.push(item.src);
}).catch(function (error) {
setElRender(item.el, item.bindType, Init.error, 'error');
setElRender(item.el, item.bindType, item.error, 'error');
});
};

Expand Down Expand Up @@ -173,34 +148,49 @@ exports.install = function (Vue, Options) {
}
};

var addListener = function addListener(el, binding, vnode) {
if (el.getAttribute('lazy') === 'loaded') return;
var hasIt = Listeners.find(function (item) {
return item.el === el;
var checkElExist = function checkElExist(el) {
var hasIt = false;

Listeners.forEach(function (item) {
if (item.el === el) hasIt = true;
});

if (hasIt) {
return Vue.nextTick(function () {
setTimeout(function () {
lazyLoadHandler();
}, 0);
lazyLoadHandler();
});
}
return hasIt;
};

var parentEl = null;
var addListener = function addListener(el, binding, vnode) {
if (el.getAttribute('lazy') === 'loaded') return;
if (checkElExist(el)) return;

var parentEl = null;
var imageSrc = binding.value;
var imageLoading = Init.loading;
var imageError = Init.error;

if (typeof binding.value !== 'string') {
imageSrc = binding.value.src;
imageLoading = binding.value.loading || Init.loading;
imageError = binding.value.error || Init.error;
}
if (binding.modifiers) {
parentEl = window.document.getElementById(Object.keys(binding.modifiers)[0]);
}

setElRender(el, binding.arg, Init.loading, 'loading');
setElRender(el, binding.arg, imageLoading, 'loading');

Vue.nextTick(function () {
Listeners.push({
bindType: binding.arg,
try: 0,
parentEl: parentEl,
el: el,
src: binding.value
error: imageError,
src: imageSrc
});
lazyLoadHandler();
if (Listeners.length > 0 && !Init.hasbind) {
Expand All @@ -222,7 +212,7 @@ exports.install = function (Vue, Options) {
});
} else {
Vue.directive('lazy', {
bind: function bind() {},
bind: lazyLoadHandler,
update: function update(newValue, oldValue) {
addListener(this.el, {
modifiers: this.modifiers,
Expand Down
63 changes: 27 additions & 36 deletions vue-lazyload.js
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,5 @@
const Promise = require('es6-promise').Promise

if (!Array.prototype.find) {
Array.prototype.find = function(predicate) {
'use strict';
if (this == null) {
throw new TypeError('Array.prototype.find called on null or undefined');
}
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
var list = Object(this);
var length = list.length >>> 0;
var thisArg = arguments[1];
var value;

for (var i = 0; i < length; i++) {
value = list[i];
if (predicate.call(thisArg, value, i, list)) {
return value;
}
}
return undefined;
};
}

exports.install = function(Vue, Options) {
const isVueNext = Vue.version.split('.')[0] === '2'
const DEFAULT_PRE = 1.3
Expand Down Expand Up @@ -140,7 +116,7 @@ exports.install = function(Vue, Options) {
Loaded.push(item.src)
})
.catch((error) => {
setElRender(item.el, item.bindType, Init.error, 'error')
setElRender(item.el, item.bindType, item.error, 'error')
})
}

Expand Down Expand Up @@ -173,34 +149,49 @@ exports.install = function(Vue, Options) {
}
}

const addListener = (el, binding, vnode) => {
if (el.getAttribute('lazy') === 'loaded') return
let hasIt = Listeners.find((item) => {
return item.el === el
const checkElExist = (el) => {
let hasIt = false

Listeners.forEach((item) => {
if (item.el === el) hasIt = true
})

if (hasIt) {
return Vue.nextTick(() => {
setTimeout(() => {
lazyLoadHandler()
}, 0)
lazyLoadHandler()
})
}
return hasIt
}

const addListener = (el, binding, vnode) => {
if (el.getAttribute('lazy') === 'loaded') return
if (checkElExist(el)) return

let parentEl = null

let imageSrc = binding.value
let imageLoading = Init.loading
let imageError = Init.error

if (typeof(binding.value) !== 'string') {
imageSrc = binding.value.src
imageLoading = binding.value.loading || Init.loading
imageError = binding.value.error || Init.error
}
if (binding.modifiers) {
parentEl = window.document.getElementById(Object.keys(binding.modifiers)[0])
}

setElRender(el, binding.arg, Init.loading, 'loading')
setElRender(el, binding.arg, imageLoading, 'loading')

Vue.nextTick(() => {
Listeners.push({
bindType: binding.arg,
try: 0,
parentEl: parentEl,
el: el,
src: binding.value
error: imageError,
src: imageSrc
})
lazyLoadHandler()
if (Listeners.length > 0 && !Init.hasbind) {
Expand All @@ -222,7 +213,7 @@ exports.install = function(Vue, Options) {
})
} else {
Vue.directive('lazy', {
bind () {},
bind: lazyLoadHandler,
update (newValue, oldValue) {
addListener(this.el, {
modifiers: this.modifiers,
Expand Down

0 comments on commit 23fa6a2

Please sign in to comment.