Merge branch 'feature/lazyload' into 'release/6.1'

raw-lazyload



See merge request !905

@@ -54,6 +54,7 @@
     "fast-safe-stringify": "^1.2.0",
     "feed": "^1.1.0",
     "geetest": "^4.1.2",
+    "jquery-lazyload": "^1.9.7",
     "lodash": "^4.17.4",
     "memory-cache": "^0.2.0",
     "moment": "^2.18.1",

 var $ = require('yoho-jquery');
-var lazyLoad = require('yoho-jquery-lazyload');
+var lazyLoad = require('plugin/lazyload');
 var Swiper = require('yoho-swiper');
 var qs = require('yoho-qs');
 var yoho = require('../yoho-app');

+require('./webp-support');
+
+const $ = require('yoho-jquery');
+
+require('jquery-lazyload');
+
+/**
+ * 图片链接处理
+ */
+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 === 75 ? '?imageslim' : `?imageView2/0/interlace/1/q/${params.q}`;
+
+            url += extQuery;
+        }
+    }
+
+    return url;
+};
+
+/**
+ * 图片链接预处理后使用原生 lazyload
+ */
+const rawLazyload = (selector, options) => {
+    let $imgs;
+    let params = {
+        threshold: 600
+    };
+    let imgParams = {
+        q: options && options.q || 75
+    };
+
+    if (selector instanceof $) {
+        $imgs = selector;
+    } else {
+        $imgs = $(selector).find('img.lazy');
+    }
+
+    $.extend(params, options);
+
+    const imgsProcess = () => {
+        $imgs.each((index, elem) => {
+            $(elem).attr('data-original', imgSrcHandle($(elem).data('original'), imgParams));
+        });
+        $imgs.lazyload(params);
+    };
+
+    if (typeof window.supportWebp !== 'undefined') {
+        imgsProcess();
+    } else {
+        $(document).on('supportWebp', imgsProcess);
+    }
+};
+
+module.exports = rawLazyload;

+const $ = require('yoho-jquery');
+
+/**
+ * 检测浏览器是否支持 webp 图片格式
+ */
+const checkWebpSupport = (feature) => {
+    let kTestImages = {
+        lossy: 'UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA',
+
+        /* eslint-disable */
+        /* lossless: 'UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==',
+        alpha: 'UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==', // eslint-disable-line
+        animation: 'UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA' // eslint-disable-line */
+        /* eslint-enable */
+    };
+    let img = new Image();
+
+    img.onload = () => {
+        let result = (img.width > 0) && (img.height > 0);
+
+        window.supportWebp = result || false;
+        $(document).trigger('supportWebp');
+    };
+    img.onerror = () => {
+        window.supportWebp = false;
+        $(document).trigger('supportWebp');
+    };
+    img.src = 'data:image/webp;base64,' + kTestImages[feature];
+};
+
+checkWebpSupport('lossy');

@@ -2,14 +2,13 @@
  * @Author: Targaryen
  * @Date: 2017-03-23 11:31:51
  * @Last Modified by: Targaryen
- * @Last Modified time: 2017-05-02 11:17:31
  */
 
 /** *****************
  * 红人店铺首页
  ********************/
 const Swiper2 = require('yoho-swiper2');
-const lazyLoad = require('yoho-jquery-lazyload');
+const lazyLoad = require('plugin/lazyload');
 let tip = require('../../plugin/tip');
 let $goodsContainer = $('.index-goods-container');
 let $indexGoodsContaniner = $('#indexGoodsContainer');