lazyload.js
2.61 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
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
require('./webp-support');
const $ = require('yoho-jquery');
require('jquery-lazyload');
const defaultQuality = 60;
/**
* 图片链接处理
*/
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 === defaultQuality ? '?imageslim' : `?imageView2/0/interlace/1/q/${params.q}`;
url += extQuery;
}
imgUrl = url;
} else if (/imageView2/.test(query)) {
if (!/\/q\/\d+/.test(query)) {
imgUrl += `/q/${params.q}`;
} else {
imgUrl = imgUrl.replace(/\/q\/\d+/g, '/q/' + params.q);
}
if (window.supportWebp && !/format\//i.test(query)) {
imgUrl += '/format/webp';
}
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');
}
} else if (/imageMogr2/.test(query)) {
if (!/\/quality\/\d+/.test(query)) {
imgUrl += `/quality/${params.q}`;
} else {
imgUrl = imgUrl.replace(/\/quality\/\d+/g, '/quality/' + params.q);
}
if (window.supportWebp && !/format\//.test(query)) {
imgUrl += '/format/webp';
}
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');
}
}
return imgUrl;
};
/**
* 图片链接预处理后使用原生 lazyload
*/
const rawLazyload = (selector, options) => {
let $imgs;
let params = {
threshold: 700 * 3 // 一页大概700 ，提前加载三、四页
};
let imgParams = {
q: options && options.q || defaultQuality
};
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;