lazyload.js 1.4 KB
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;