lazyload v2

@@ -94,7 +94,9 @@
     "handlebars-loader": "^1.6.0",
     "happypack": "^4.0.0",
     "husky": "^0.14.3",
+    "intersection-observer": "^0.5.0",
     "jquery-lazyload": "^1.9.7",
+    "lozad": "^1.0.9",
     "nodemon": "^1.12.0",
     "postcss": "^6.0.9",
     "postcss-assets": "^5.0.0",

+require('./webp-support');
+
+const defaultQuality = 60;
+
+/**
+ * 图片链接处理
+ */
+const imgSrcHandle = (imgUrl, params) => {
+    if (!imgUrl) {
+        return imgUrl;
+    }
+
+    params = Object.assign({
+        q: defaultQuality
+    }, params);
+
+    let splits = imgUrl.split('?');
+    let url = splits[0];
+    let query = splits[1] || '';
+
+    if (!query || query === 'imageslim') {
+        if (window.supportWebp) {
+            url += `?imageView2/0/interlace/1/format/webp/q/${params.q}`;
+        } else {
+            let extQuery = params.q === defaultQuality ? '?imageslim' : `?imageView2/0/interlace/1/q/${params.q}`;
+
+            url += extQuery;
+        }
+        imgUrl = url;
+    } else if (/imageView2/.test(query)) {
+        if (!/\/q\/\d+/.test(query)) {
+            imgUrl += `/q/${params.q}`;
+        } else {
+            imgUrl = imgUrl.replace(/\/q\/\d+/g, '/q/' + params.q);
+        }
+
+        if (window.supportWebp && !/format\//i.test(query)) {
+            imgUrl += '/format/webp';
+        }
+
+        if (window.supportWebp && (/format\/png/i.test(query) || /format\/jpg/i.test(query))) {
+            imgUrl = imgUrl.replace(/format\/png/i, 'format/webp').replace(/format\/jpg/i, 'format/webp');
+        }
+    } else if (/imageMogr2/.test(query)) {
+        if (!/\/quality\/\d+/.test(query)) {
+            imgUrl += `/quality/${params.q}`;
+        } else {
+            imgUrl = imgUrl.replace(/\/quality\/\d+/g, '/quality/' + params.q);
+        }
+
+        if (window.supportWebp && !/format\//.test(query)) {
+            imgUrl += '/format/webp';
+        }
+
+        if (window.supportWebp && (/format\/png/i.test(query) || /format\/jpg/i.test(query))) {
+            imgUrl = imgUrl.replace(/format\/png/i, 'format/webp').replace(/format\/jpg/i, 'format/webp');
+        }
+    }
+    return imgUrl;
+};
+
+module.exports = imgSrcHandle;

+import 'intersection-observer';
+import $ from 'yoho-jquery';
+import lozad from 'lozad';
+import imgSrcHandle from './img-src-handle';
+
+/**
+ * lazyload
+ */
+const lazyload = (selector, options) => {
+    options = Object.assign({
+        threshold: 700 * 2, // 一页大概700px ，提前加载三、四页
+        data_attribute: 'original'
+    }, options);
+
+    if (selector instanceof $) {
+        selector = selector.selector;
+    }
+
+    const imgsProcess = () => {
+        const observer = lozad(selector, {
+            rootMargin: `${options.threshold / 2}px 0px ${options.threshold}px`, // syntax similar to that of CSS Margin
+            threshold: 0.1, // ratio of element convergence
+            load(element) {
+                let src = element.getAttribute(`data-${options.data_attribute}`);
+
+                if (src) {
+                    element.src = imgSrcHandle(src, options);
+                }
+            }
+        });
+
+        observer.observe();
+    };
+
+    if (typeof window.supportWebp !== 'undefined') {
+        imgsProcess();
+    } else {
+        $(document).on('supportWebp', imgsProcess);
+    }
+};
+
+module.exports = lazyload;

-require('./webp-support');
-
 const $ = require('yoho-jquery');
+const imgSrcHandle = require('./img-src-handle');
 
 require('jquery-lazyload');
 
-const defaultQuality = 60;
-
-/**
- * 图片链接处理
- */
-const imgSrcHandle = (imgUrl, params) => {
-    if (!imgUrl) {
-        return imgUrl;
-    }
-
-    let splits = imgUrl.split('?');
-    let url = splits[0];
-    let query = splits[1] || '';
-
-    if (!query || query === 'imageslim') {
-        if (window.supportWebp) {
-            url += `?imageView2/0/interlace/1/format/webp/q/${params.q}`;
-        } else {
-            let extQuery = params.q === defaultQuality ? '?imageslim' : `?imageView2/0/interlace/1/q/${params.q}`;
-
-            url += extQuery;
-        }
-        imgUrl = url;
-    } else if (/imageView2/.test(query)) {
-        if (!/\/q\/\d+/.test(query)) {
-            imgUrl += `/q/${params.q}`;
-        } else {
-            imgUrl = imgUrl.replace(/\/q\/\d+/g, '/q/' + params.q);
-        }
-
-        if (window.supportWebp && !/format\//i.test(query)) {
-            imgUrl += '/format/webp';
-        }
-
-        if (window.supportWebp && (/format\/png/i.test(query) || /format\/jpg/i.test(query))) {
-            imgUrl = imgUrl.replace(/format\/png/i, 'format/webp').replace(/format\/jpg/i, 'format/webp');
-        }
-    } else if (/imageMogr2/.test(query)) {
-        if (!/\/quality\/\d+/.test(query)) {
-            imgUrl += `/quality/${params.q}`;
-        } else {
-            imgUrl = imgUrl.replace(/\/quality\/\d+/g, '/quality/' + params.q);
-        }
-
-        if (window.supportWebp && !/format\//.test(query)) {
-            imgUrl += '/format/webp';
-        }
-
-        if (window.supportWebp && (/format\/png/i.test(query) || /format\/jpg/i.test(query))) {
-            imgUrl = imgUrl.replace(/format\/png/i, 'format/webp').replace(/format\/jpg/i, 'format/webp');
-        }
-    }
-    return imgUrl;
-};
-
 /**
  * 图片链接预处理后使用原生 lazyload
  */
 const rawLazyload = (selector, options) => {
     let $imgs;
     let params = {
-        threshold: 700 * 3 // 一页大概700 ，提前加载三、四页
-    };
-    let imgParams = {
-        q: options && options.q || defaultQuality
+        threshold: 700 * 2 // 一页大概700 ，提前加载三、四页
     };
 
     if (selector instanceof $) {
@@ -81,7 +22,7 @@ const rawLazyload = (selector, options) => {
 
     const imgsProcess = () => {
         $imgs.each((index, elem) => {
-            $(elem).attr('data-original', imgSrcHandle($(elem).data('original'), imgParams));
+            $(elem).attr('data-original', imgSrcHandle($(elem).data('original'), options));
         });
         $imgs.lazyload(params);
     };