add mode option

Author: lsycxyj

demo/src/App.vue

@@ -65,7 +65,7 @@
 <template>
 	<div>
 		<div>
-			<lazy-ref ref="lazyRef" class="lazy-ref" :opts="{classTarget:'parent'}">
+			<lazy-ref ref="lazyRef" class="lazy-ref" :opts="{classTarget:'parent', retry:3}">
 				<div>
 					<img v-lazy="{ref:'lazyRef', src:img}">
 				</div>

package.json

@@ -69,7 +69,6 @@
     "less": "^2.7.2",
     "less-loader": "^2.2.3",
     "phantomjs-prebuilt": "^2.1.14",
-    "simulant": "^0.2.2",
     "url-loader": "^0.5.7",
     "vue-loader": "^10.0.0",
     "vue-style-loader": "^1.0.0",

src/index.js

@@ -48,6 +48,9 @@ const LazyRef = {
 			el,
 		});
 	},
+	destroyed() {
+		this.$lazy.destroy();
+	},
 	methods: {
 		check() {
 			this.$lazy.check();

src/lazy.js

@@ -1,6 +1,6 @@
 import { $ } from './util';
 
-/* global window */
+/* global window, Image */
 const EV_SCROLL = 'scroll',
 
 	CLASS_LOADING = 'lazy-loading',
@@ -10,6 +10,8 @@ const EV_SCROLL = 'scroll',
 	CLASS_TARGET_SELF = 'self',
 	CLASS_TARGET_PARENT = 'parent',
 
+	MODE_BG = 'bg',
+
 	STAT_NOT_LOAD = 0,
 	STAT_LOADING = 1,
 	STAT_LOADED = 2,
@@ -24,6 +26,7 @@ const {
 	addClass,
 	removeClass,
 	attr,
+	css,
 	removeAttr,
 	offset,
 	isArr,
@@ -95,7 +98,10 @@ function loadHandler(lazyLoader) {
 		classLoading,
 		classErr,
 		classLoaded,
-	} = opts;
+	} = opts,
+		loadEl = el,
+		onLoad,
+		onErr;
 
 	const classes = [classLoading, classErr, classLoaded],
 		elTarget = classTarget == CLASS_TARGET_PARENT ? el.parentNode || el : el;
@@ -109,22 +115,39 @@ function loadHandler(lazyLoader) {
 
 	src = trim(src);
 
+	switch (lazyLoader.opts.mode) {
+	case MODE_BG:
+		css(el, 'background-image', 'none');
+		onLoad = () => {
+			css(el, 'background-image', `url(${src})`);
+		};
+		onErr = () => {
+			css(el, 'background-image', 'none');
+		};
+		loadEl = new Image();
+		break;
+	default:// empty
+	}
+
 	if (!src) {
 		lazyLoader.stat = STAT_LOADED;
 		switchClass(elTarget, classLoaded);
 	}
 	else {
 		lazyLoader.stat = STAT_LOADING;
+
 		lazyLoader.req = new Req({
-			el,
+			el: loadEl,
 			src,
 			retry,
 			onLoad: () => {
+				onLoad && onLoad();
 				lazyLoader.stat = STAT_LOADED;
 				switchClass(elTarget, classLoaded);
 				once && lazyLoader.destroy();
 			},
 			onErr: () => {
+				onErr && onErr();
 				lazyLoader.stat = STAT_LOADED;
 				switchClass(elTarget, classErr);
 				once && lazyLoader.destroy();

src/util.js

@@ -1,5 +1,14 @@
 /* global getComputedStyle window */
 const win = window,
+	cssNumber = {
+		'column-count': 1,
+		columns: 1,
+		'font-weight': 1,
+		'line-height': 1,
+		opacity: 1,
+		'z-index': 1,
+		zoom: 1,
+	},
 	round = Math.round;
 
 function type(o) {
@@ -105,6 +114,35 @@ function throttle(fn, threshold = 250, scope) {
 	};
 }
 
+function camelize(str) {
+	return str.replace(/-+(.)?/g, (match, chr) => (chr ? chr.toUpperCase() : ''));
+}
+
+function dasherize(str) {
+	return str.replace(/::/g, '/')
+		.replace(/([A-Z]+)([A-Z][a-z])/g, '$1_$2')
+		.replace(/([a-z\d])([A-Z])/g, '$1_$2')
+		.replace(/_/g, '-')
+		.toLowerCase();
+}
+
+function maybeAddPx(name, value) {
+	return (type(value) == 'number' && !cssNumber[dasherize(name)]) ? `${value}px` : value;
+}
+
+function css(element, property, value) {
+	/* eslint consistent-return: 0 */
+	const elementSytle = element.style;
+	if (arguments.length < 3) {
+		return elementSytle[camelize(property)] || getComputedStyle(element, '').getPropertyValue(property);
+	}
+	else if (!value && value !== 0) {
+		elementSytle.removeProperty(dasherize(property));
+	}
+	else {
+		elementSytle[dasherize(property)] = maybeAddPx(property, value);
+	}
+}
 
 export const $ = {
 	on,
@@ -116,6 +154,7 @@ export const $ = {
 	addClass,
 	removeClass,
 	attr,
+	css,
 	removeAttr,
 	each,
 	offset,

test/unit/specs/lazyload.spec.js

@@ -1,63 +1,20 @@
 // TODO not all tested
 
 import $ from 'jquery';
-import {Carousel, CarouselItem} from '../../../src/index';
-import {cssTextToObject, createVM, destroyVM, createVirtualPointer} from '../util';
-
-const EV_CHANGED_INDEX = 'changed-index',
-	EV_RENDER_UPDATED = 'render-updated',
-	EV_PREV = 'prev',
-	EV_NEXT = 'next',
-	EV_TO = 'to',
-
-	EV_CLICK = 'click',
-	EV_TOUCHSTART = 'touchstart',
-	EV_TOUCHMOVE = 'touchmove',
-	EV_TOUCHEND = 'touchend',
-	EV_MOUSE_DOWN = 'mousedown',
-	EV_MOUSE_MOVE = 'mousemove',
-	EV_MOUSE_UP = 'mouseup',
-
-	TIME_LAG = 100;
+import { VueLLazyload } from '../../../src/index';
+import {cssTextToObject, createVM, destroyVM, genImgSrc, genImgList} from '../util';
 
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 20 * 1000;
 
-describe('Suite: test Carousel.vue', () => {
-	const COMMON_SPEED_TIME = 300,
-		COMMON_LIST = [
-			{
-				url: 'url1'
-			},
-			{
-				url: 'url2'
-			},
-			{
-				url: 'url3'
-			}
-		],
-		COMMON_DATA = {
-			prevHTML: '<',
-			nextHTML: '>',
-			speed: COMMON_SPEED_TIME,
-			list: COMMON_LIST,
-			loop: false,
-			rewind: false,
-			mouseDrag: false,
-			auto: 0,
-			dots: true,
-			dotsStyle: '',
-		},
-		$body = $('body');
+describe('Suite: test vue-l-lazyload', () => {
+		const $body = $('body');
 	let vm;
 
 	$body.css({
 		padding: 0,
 		margin: 0,
 	});
 
-	//beforeEach(() => {
-	//});
-	//
 	afterEach(() => {
 		destroyVM(vm);
 	});
@@ -67,20 +24,9 @@ describe('Suite: test Carousel.vue', () => {
 		vm = createVM(
 			`
 				<div>
-					<carousel ref="car" :watch-items="list" :prev-html="prevHTML" :next-html="nextHTML" :speed="speed" :loop="loop" :rewind="rewind" :mouseDrag="mouseDrag" :auto="auto" :dots="dots" :dots-style="dotsStyle">
-						<carousel-item v-for="(item, index) in list">
-							<p>CarouselItem{{index}}, URL is {{item.url}}</p>
-						</carousel-item>
-						<div slot="before">Insert node before</div>
-						<div slot="after">Insert node after</div>
-					</carousel>
 				</div>
 			`,
 			{
-				components: {
-					'carousel': Carousel,
-					'carousel-item': CarouselItem
-				},
 				...data,
 			});
 	}

test/unit/util.js

@@ -1,6 +1,5 @@
 import Vue from 'vue';
 import $ from 'jquery';
-import simulant from 'simulant';
 
 function type(o) {
 	return typeof o;
@@ -49,42 +48,6 @@ function createVM(Compo, propsData = {}, mounted) {
 	return new VueExtended(nPropsData).$mount(mounted === false ? null : el)
 }
 
-function createVirtualPointer() {
-	return {
-		x: 0,
-		y: 0,
-		trigger(evtName) {
-			const x = this.x,
-				y = this.y;
-			// TODO: I haven't found a good way to simulate touch events
-			simulant.fire(document.elementFromPoint(x, y), evtName, {
-				clientX: x,
-				clientY: y,
-				pageX: x,
-				pageY: y,
-				touches: [
-					{
-						pageX: x,
-						pageY: y,
-					}
-				],
-				targetTouches: [{
-					pageX: x,
-					pageY: y,
-				}],
-			});
-			//$(document.elementFromPoint(x, y)).trigger($.Event(evtName, {
-			//	pageX: x,
-			//	pageY: y,
-			//	targetTouches: [{
-			//		pageX: x,
-			//		pageY: y,
-			//	}],
-			//}));
-		},
-	}
-}
-
 function cssTextToObject(txt) {
 	const result = {};
 	txt.split(';').forEach((term) => {
@@ -98,10 +61,22 @@ function cssTextToObject(txt) {
 	return result;
 }
 
+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  {
 	destroyVM,
 	createAndReplaceElem,
 	createVM,
-	createVirtualPointer,
-	cssTextToObject
+	cssTextToObject,
+	genImgSrc,
+	genImgList,
 };