backup

Author: lsycxyj

demo/src/App.vue

@@ -1,12 +1,9 @@
 <style lang="less">
-	.container {
+	.lazy-ref {
 		height: 640px;
 		overflow: auto;
 	}
 
-	.lazy-ref {
-	}
-
 	img {
 		width: 200px;
 		height: 200px;
@@ -31,6 +28,13 @@
 		height: 200px;
 	}
 
+	.buttons {
+		position: fixed;
+		right: 20px;
+		bottom: 20px;
+		z-index: 20;
+	}
+
 	@-webkit-keyframes sk-rotateplane {
 		0% {
 			-webkit-transform: perspective(120px)
@@ -60,35 +64,61 @@
 </style>
 <template>
 	<div>
-		<div class="container">
-			<div class="lazy-loading"></div>
-			<lazy-ref ref="lazyRef" class="lazy-ref" opts="{classTarget:'parent'}">
+		<div>
+			<lazy-ref ref="lazyRef" class="lazy-ref" :opts="{classTarget:'parent'}">
 				<div>
 					<img v-lazy="{ref:'lazyRef', src:img}">
 				</div>
+				<div class="list">
+					<div v-for="img in imgs">
+						<img v-lazy="{ref:'lazyRef', src:img}">
+					</div>
+				</div>
 			</lazy-ref>
 		</div>
-		<button @click="changeImg">Change img</button>
+		<div class="list">
+			<div v-for="img in imgs">
+				<img v-lazy="{classTarget:'parent', src:img}">
+			</div>
+		</div>
+		<div class="buttons">
+			<button @click="changeImg">Change img</button>
+			<button @click="changeImgs">Change imgs</button>
+		</div>
 	</div>
 </template>
 <script>
 let i = 0;
 
+const LIST_LEN = 20;
+
 function genImgSrc() {
 	return 'img/lenna.png?_t=' + Math.floor(Math.random() * 100000) + '.' + Date.now();
 }
 
+function genImgList(len) {
+	const arr = [];
+	while (len--) {
+		arr.push(genImgSrc());
+	}
+	return arr;
+}
+
 export default {
 	data() {
 		return {
 			img: genImgSrc(),
+			imgs: genImgList(LIST_LEN),
 			show: true
 		};
 	},
 	methods: {
 		changeImg() {
 			this.img = genImgSrc();
 		},
+		changeImgs() {
+			this.imgs = genImgList(LIST_LEN);
+		},
 		changeShow() {
 			this.show = !this.show;
 		},
@@ -98,6 +128,4 @@ export default {
 	}
 };
 
-
-
 </script>

demo/src/main.js

@@ -2,12 +2,14 @@ import Vue from 'vue'
 import app from './App'
 import { VueLLazyload } from '../../src/index';
 
-Vue.use(VueLLazyload);
+Vue.use(VueLLazyload, {
+	once: false
+});
 
 new Vue({
 	el: '#app',
 	template: '<app></app>',
 	components: {
 		app
 	}
-});
+});

src/index.js

@@ -70,7 +70,7 @@ const Lazy = {
 			refStr = opts.ref;
 
 		// add to after $refs has references
-		Vue.nextTick(() => {
+		vm.$nextTick(() => {
 			// Prevent it's unbound before initialization
 			if (el._lazyBound) {
 				var ref;
@@ -81,39 +81,44 @@ const Lazy = {
 					}
 				}
 
-				const loader = el._$lazy = new LazyLoader({
-					...opts,
-					parent: ref && ref.$lazy,
-					el: el
-				});
+				const mergedOpts = {
+						...opts,
+						el: el
+					},
+					$lazy = ref && ref.$lazy;
+
+				if ($lazy !== undefined) {
+					mergedOpts.parent = $lazy;
+				}
+
+				const loader = el._$lazy = new LazyLoader(mergedOpts);
 
 				loader.check();
 			}
 		});
 	},
-	componentUpdated(el, binding, vnode) {
-		var opts = binding.value;
+	componentUpdated(el, binding) {
+		var opts = binding.value,
+			oOpts = binding.oldValue,
+			nSrc = isStr(opts) ? opts : opts.src,
+			oSrc = isStr(oOpts) ? oOpts : oOpts.src;
 
-		if (isStr(opts)) {
-			opts = {
-				src: opts
-			};
-		}
-
-		const loader = el._$lazy;
+		if (nSrc != oSrc) {
+			const loader = el._$lazy;
 
-		if (loader) {
-			loader.update({
-				src: opts.src
-			});
+			if (loader) {
+				loader.update({
+					src: nSrc
+				});
+			}
 		}
 	},
-	unbind(el){
+	unbind(el, binding, vnode){
 		if (el._lazyBound) {
 			el._lazyBound = false;
 		}
 
-		Vue.nextTick(() => {
+		vnode.context.$nextTick(() => {
 			const loader = el._$lazy;
 			if (loader) {
 				loader.destroy();
@@ -126,7 +131,7 @@ const Lazy = {
 const VueLLazyload = {
 	install(Vue, options = {}) {
 		LazyLoader = LazyClass(Vue);
-		Vue.prototype.$lazy = new LazyLoader({
+		Vue.$lazy = new LazyLoader({
 			...options,
 			isRoot: true
 		});
@@ -137,10 +142,8 @@ const VueLLazyload = {
 	}
 };
 
-export default VueLLazyload;
-
 export {
 	LazyRef,
 	Lazy,
 	VueLLazyload
-};
+};

src/lazy.js

@@ -1,5 +1,4 @@
-import Vue from 'vue';
-import { $ } from './util';
+import {$} from './util';
 
 const EV_SCROLL = 'scroll',
 
@@ -44,7 +43,7 @@ try {
 }
 
 var loaderID = 0;
-function LazyClass(scope) {
+export function LazyClass(scope) {
 	return class LazyLoader {
 		constructor(opts) {
 			const me = this,
@@ -83,8 +82,10 @@ function LazyClass(scope) {
 			}
 			else {
 				// inherit parent LazyLoader's options
-				opts = Object.create(parent && parent.opts, {
-					parent: scope.$lazy,
+				const $rootLazy = scope.$lazy;
+				opts = Object.assign({
+					parent: $rootLazy
+				}, parent && parent.opts || $rootLazy.opts, {
 					...opts
 				});
 			}
@@ -141,8 +142,8 @@ function LazyClass(scope) {
 					preloadRatio = me.opts.preloadRatio,
 					isWin = parentEl === win,
 					parentElOffset = isWin ? {
-							left: 0,
-							top: 0,
+							left: win.scrollX,
+							top: win.scrollY,
 							width: win.innerWidth,
 							height: win.innerHeight
 						} : offset(parentEl),
@@ -153,14 +154,14 @@ function LazyClass(scope) {
 					parentElHeight = parentElOffset.height * preloadRatio,
 					elLeft = elOffset.left,
 					elTop = elOffset.top,
-					elWidth = elOffset.width * preloadRatio,
-					elHeight = elOffset.height * preloadRatio;
+					elWidth = elOffset.width,
+					elHeight = elOffset.height;
 
 				// Collision detection
-				if (elLeft > parentElLeft - elLeft &&
-					elLeft < parentElLeft + parentElWidth + elWidth &&
-					elTop > parentElTop - elHeight &&
-					elTop < parentElTop + parentElHeight + elHeight) {
+				if (elLeft < parentElLeft + parentElWidth &&
+					elLeft + elWidth > parentElLeft &&
+					elTop < parentElTop + parentElHeight &&
+					elTop + elHeight > parentElTop) {
 					result = true;
 				}
 			}
@@ -186,7 +187,7 @@ function LazyClass(scope) {
 							cb = cbs[event];
 
 						if (!cb) {
-							cbs[event] = throttle(function () {
+							cb = cbs[event] = throttle(function () {
 								for (var j = 0, jLen = queue.length; j < jLen; j++) {
 									queue[j].check();
 								}
@@ -208,6 +209,8 @@ function LazyClass(scope) {
 
 			// reset
 			me.stat = STAT_NOT_LOAD;
+
+			me.check();
 		}
 
 		rmChild(lazyLoader) {
@@ -268,7 +271,6 @@ class Req {
 		}
 
 		me.canceled = false;
-		me.stat = STAT_LOADING;
 		me.retry = retry;
 
 		el.onload = () => {
@@ -327,6 +329,7 @@ function loadHandler(lazyLoader) {
 		switchClass(elTarget, classLoaded);
 	}
 	else {
+		lazyLoader.stat = STAT_LOADING;
 		lazyLoader.req = new Req({
 			el: el,
 			src: src,
@@ -346,6 +349,3 @@ function loadHandler(lazyLoader) {
 	}
 }
 
-export default {
-	LazyClass
-};