Blame view

public/js/plugin/lazyload.js 2.56 KB
郭成尧 authored
1 2 3 4 5 6
require('./webp-support');

const $ = require('yoho-jquery');

require('jquery-lazyload');
郭成尧 authored
7 8
const defaultQuality = 60;
郭成尧 authored
9 10 11 12 13 14 15 16 17 18 19 20
/**
 * 图片链接处理
 */
const imgSrcHandle = (imgUrl, params) => {
    if (!imgUrl) {
        return imgUrl;
    }

    let splits = imgUrl.split('?');
    let url = splits[0];
    let query = splits[1] || '';
郭成尧 authored
21
    if (!query || query === 'imageslim') {
郭成尧 authored
22
        if (window.supportWebp) {
郭成尧 authored
23
            url += `?imageView2/0/interlace/1/format/webp/q/${params.q}`;
郭成尧 authored
24
        } else {
郭成尧 authored
25
            let extQuery = params.q === defaultQuality ? '?imageslim' : `?imageView2/0/interlace/1/q/${params.q}`;
郭成尧 authored
26
郭成尧 authored
27 28
            url += extQuery;
        }
郭成尧 authored
29 30
        imgUrl = url;
    } else if (/imageView2/.test(query)) {
郭成尧 authored
31
        if (!/\/q\/\d+/.test(query)) {
郭成尧 authored
32 33 34 35 36
            imgUrl += `/q/${params.q}`;
        } else {
            imgUrl = imgUrl.replace(/\/q\/\d+/g, '/q/' + params.q);
        }
郭成尧 authored
37
        if (window.supportWebp && !/format\//i.test(query)) {
郭成尧 authored
38 39
            imgUrl += '/format/webp';
        }
郭成尧 authored
40 41 42 43

        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');
        }
郭成尧 authored
44
    } else if (/imageMogr2/.test(query)) {
郭成尧 authored
45
        if (!/\/quality\/\d+/.test(query)) {
郭成尧 authored
46 47 48 49 50
            imgUrl += `/quality/${params.q}`;
        } else {
            imgUrl = imgUrl.replace(/\/quality\/\d+/g, '/quality/' + params.q);
        }
郭成尧 authored
51
        if (window.supportWebp && !/format\//.test(query)) {
郭成尧 authored
52 53
            imgUrl += '/format/webp';
        }
郭成尧 authored
54 55 56 57

        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');
        }
郭成尧 authored
58
    }
郭成尧 authored
59
    return imgUrl;
郭成尧 authored
60 61 62 63 64 65 66 67
};

/**
 * 图片链接预处理后使用原生 lazyload
 */
const rawLazyload = (selector, options) => {
    let $imgs;
    let params = {
郭成尧 authored
68
        threshold: 700
郭成尧 authored
69 70
    };
    let imgParams = {
郭成尧 authored
71
        q: options && options.q || defaultQuality
郭成尧 authored
72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96
    };

    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;