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;