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;