├── demo
└── demo.html
├── README.md
├── .gitignore
├── LICENSE
└── mlazy.js
/demo/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | m-lazy-demo
6 |
7 |
8 |
9 |
10 |
11 |
14 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # mlazy
2 |
3 | 移动端图片懒加载插件, 支持iScroll5
4 |
5 | ## init
6 |
7 | new mlazy(selector, options);
8 |
9 | ### selector
10 | 选择器
11 |
12 | ### options
13 |
14 | #### offset
15 | 偏移量
16 |
17 | #### lazyTime
18 | 延迟时间
19 |
20 | #### iScroll
21 | 若页面使用了iScroll, 则需传入iScroll对象
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 |
6 | # Runtime data
7 | pids
8 | *.pid
9 | *.seed
10 |
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 |
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 |
17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
18 | .grunt
19 |
20 | # node-waf configuration
21 | .lock-wscript
22 |
23 | # Compiled binary addons (http://nodejs.org/api/addons.html)
24 | build/Release
25 |
26 | # Dependency directory
27 | node_modules
28 |
29 | # Optional npm cache directory
30 | .npm
31 |
32 | # Optional REPL history
33 | .node_repl_history
34 |
35 | .idea
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Jason
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/mlazy.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author: Jason.占友伟 zhanyouwei@icloud.com
3 | * Created on 16/3/21.
4 | */
5 |
6 | (function (root, factory) {
7 | if (typeof define === 'function' && define.amd) {
8 | define(function () {
9 | return factory(root);
10 | });
11 | } else if (typeof exports === 'object') {
12 | module.exports = factory;
13 | } else {
14 | root.mlazy = factory(root);
15 | }
16 | })(this, function (root) {
17 |
18 | 'use strict';
19 |
20 | var imgList = [], // 页面所有img元素集合
21 | delay, // setTimeout 对象
22 | offset, //偏移量，用于指定图片距离可视区域多少距离，进行加载
23 | lazyTime, // 延迟载入时间
24 | _selector; // 选择器 默认为 .m-lazyload
25 |
26 | function _isShow(el) {
27 | var coords = el.getBoundingClientRect();
28 | return ( (coords.top >= 0 && coords.left >= 0 && coords.top) <= (root.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
29 | }
30 |
31 | function _loadImage() {
32 | for (var i = imgList.length; i--;) {
33 | var el = imgList[i];
34 | if (_isShow(el)) {
35 | el.src = el.getAttribute('data-src');
36 | el.className = el.className.replace(new RegExp("(\\s|^)" + _selector.substring(1, _selector.length) + "(\\s|$)"), " ");
37 | imgList.splice(i, 1);
38 | }
39 | }
40 | }
41 |
42 | function _delay() {
43 | clearTimeout(delay);
44 | delay = setTimeout(function () {
45 | _loadImage();
46 | }, lazyTime);
47 | }
48 |
49 | function mlazy(selector, options) {
50 | var defaults = options || {};
51 | offset = defaults.offset || 100;
52 | lazyTime = defaults.lazyTime || 100;
53 | _selector = selector || '.m-lazyload';
54 | this.getNode();
55 | _delay();//避免首次加载未触发touch事件,主动触发一次加载函数
56 | if (defaults.iScroll) {
57 | defaults.iScroll.on('scrollEnd', _delay);
58 | } else {
59 | root.addEventListener('scroll', _delay, false);
60 | }
61 | }
62 |
63 | mlazy.prototype.getNode = function () {
64 | imgList = [];
65 | var nodes = document.querySelectorAll(_selector);
66 | for (var i = 0, l = nodes.length; i < l; i++) {
67 | imgList.push(nodes[i]);
68 | }
69 | };
70 |
71 | return mlazy;
72 | });
--------------------------------------------------------------------------------