From 23fa6a210b79e758eb9ec55cb65d1dfee3fcd573 Mon Sep 17 00:00:00 2001 From: Awe Date: Wed, 14 Sep 2016 13:53:24 +0800 Subject: [PATCH] add: Individually error && loading assets --- README.md | 24 ++++++++++++++--- package.json | 2 +- vue-lazyload.es5.js | 66 +++++++++++++++++++-------------------------- vue-lazyload.js | 63 +++++++++++++++++++------------------------ 4 files changed, 76 insertions(+), 79 deletions(-) diff --git a/README.md b/README.md index 6e47bcf..77dc8b9 100644 --- a/README.md +++ b/README.md @@ -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 ``` +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 + +``` + + Elemet with background-image ```html diff --git a/package.json b/package.json index 86eccd2..a3f1560 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/vue-lazyload.es5.js b/vue-lazyload.es5.js index b82f406..bd803b5 100644 --- a/vue-lazyload.es5.js +++ b/vue-lazyload.es5.js @@ -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; @@ -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); } }; @@ -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'); }); }; @@ -173,26 +148,40 @@ 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({ @@ -200,7 +189,8 @@ exports.install = function (Vue, Options) { try: 0, parentEl: parentEl, el: el, - src: binding.value + error: imageError, + src: imageSrc }); lazyLoadHandler(); if (Listeners.length > 0 && !Init.hasbind) { @@ -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, diff --git a/vue-lazyload.js b/vue-lazyload.js index 54b04aa..9c25358 100644 --- a/vue-lazyload.js +++ b/vue-lazyload.js @@ -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 @@ -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') }) } @@ -173,26 +149,40 @@ 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({ @@ -200,7 +190,8 @@ exports.install = function(Vue, Options) { try: 0, parentEl: parentEl, el: el, - src: binding.value + error: imageError, + src: imageSrc }) lazyLoadHandler() if (Listeners.length > 0 && !Init.hasbind) { @@ -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,