patch for lower version of IE

Author: lsycxyj

README.md

@@ -1,2 +1,87 @@
 # vue-l-lazyload
 
+> A lazyload plugin for Vue.js v2.x+.
+
+### Pull requests are welcome :)
+
+## License
+LGPL-V3  
+[![License: LGPL v3](https://img.shields.io/badge/License-LGPL%20v3-blue.svg)](http://www.gnu.org/licenses/lgpl-3.0)
+
+## Features
+
+- No extra dependencies except Vue
+- Progressive configuration
+- Flexible events to trigger loading
+- Lazyload as src attribute and background image are supported
+- Performance boost by event delegation and passive event listener if it's available
+
+## Installation
+
+[![vue-l-lazyload](https://nodei.co/npm/vue-l-carousel.png)](https://npmjs.org/package/vue-l-lazyload)
+
+`npm install vue-l-lazyload`
+
+## Usage
+### A simple way:
+```javascript
+import { VueLLazyload } from 'v-l-lazyload';
+Vue.use(VueLLazyload, {
+	events: 'scroll'
+});
+```
+```html
+<img lazy="xxx.png">
+```
+### A more configurable way:
+```javascript
+import { VueLLazyload } from 'v-l-lazyload';
+Vue.use(VueLLazyload, config);
+```
+```html
+<lazy-ref ref="lazyRef" opts="config">
+    <img lazy="{src:xxx.png, ref:'lazyRef'}">
+</lazy-ref>
+```
+
+## Config
+<table class="table table-bordered table-striped">
+    <thead>
+        <tr>
+            <th style="width: 100px;">Name</th>
+            <th style="width: 50px;">Type</th>
+            <th style="width: 50px;">Default</th>
+            <th>Description</th>
+        </tr>
+    </thead>
+    <tbody>
+    </tobdy>
+</table>    
+
+## Directives
+### v-lazy
+#### value
+<table class="table table-bordered table-striped">
+    <thead>
+        <tr>
+            <th style="width: 50px;">Type</th>
+            <th>Description</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>String or Object</td>
+            <td>
+                If the value is an Object, it has the same spec as config.
+                If the value is a String, it will be used as `src` of config
+            </td>
+        </tr>
+    </tbody>
+</table>
+
+## Components
+### lazy-ref
+
+## Well, what's next?
+- More options for configuration
+- Supplements of test cases

demo/src/App.vue

@@ -7,6 +7,7 @@
 	img {
 		width: 200px;
 		height: 200px;
+		display: inline-block;
 	}
 
 	.lazy-loading {

src/lazy.js

@@ -198,11 +198,11 @@ export function LazyClass(scope) {
 			else {
 				// inherit parent LazyLoader's options
 				const $rootLazy = scope.$lazy;
-				opts = Object.assign({
+				opts = {
 					parent: $rootLazy,
-				}, parent && parent.opts || $rootLazy.opts, {
+					...(parent && parent.opts || $rootLazy.opts),
 					...opts,
-				});
+				};
 			}
 
 			const {
@@ -259,8 +259,9 @@ export function LazyClass(scope) {
 					preloadRatio = me.opts.preloadRatio,
 					isWin = parentEl === win,
 					parentElOffset = isWin ? {
-						left: win.scrollX,
-						top: win.scrollY,
+						// IE, I'm looking at you
+						left: win.pageXOffset,
+						top: win.pageYOffset,
 						width: win.innerWidth,
 						height: win.innerHeight,
 					} : offset(parentEl),

src/util.js

@@ -55,16 +55,55 @@ function off(element, ev, callback) {
 	}
 }
 
-function addClass(element, className) {
-	element.classList.add(className);
+function className(element, value) {
+	var klass = element.className || '',
+		svg = klass && klass.baseVal !== undefined;
+
+	if (value === undefined) return svg ? klass.baseVal : klass;
+	if (svg) {
+		klass.baseVal = value;
+	}
+	else {
+		element.className = value;
+	}
 }
 
-function removeClass(element, className) {
-	if (isStr(className)) {
-		element.classList.remove(className);
+function addClass(element, classname) {
+	const classList = element.classList;
+	if (classList) {
+		classList.add(classname);
+	}
+	else {
+		const cls = className(element).split(' '),
+			map = {};
+		each(cls, (klass) => {
+			map[klass] = true;
+		});
+
+		if (!map[classname]) {
+			className(element, cls.join(' ') + classname);
+		}
+	}
+}
+
+function classRE(name) {
+	return new RegExp(`(^|\\s)${name}(\\s|$)`);
+}
+
+function removeClass(element, classname) {
+	if (isStr(classname)) {
+		const classList = element.classList;
+		if (classList) {
+			classList.remove(classname);
+		}
+		// IE, I'm looking at you again
+		else {
+			const cls = className(element);
+			className(element, trim(cls.replace(classRE(classname), ' ')));
+		}
 	}
-	else if (isArr(className)) {
-		each(className, c => removeClass(element, c));
+	else if (isArr(classname)) {
+		each(classname, c => removeClass(element, c));
 	}
 }