Skip to content

Commit ce1f0a7

Browse files
committed
add jqlight
1 parent b2b5d68 commit ce1f0a7

File tree

4 files changed

+308
-2
lines changed

4 files changed

+308
-2
lines changed

README.md

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
- [About](#about)
88
- [Download / Install](#download--install)
99
- [Usage](#usage)
10+
- [jQLight](#jqlight)
1011
- [Demo](#demo)
1112
- [Advanced initialization](#advanced-initialization)
1213
- [Browsers with disabled JavaScript](#browsers-with-disabled-javascript)
@@ -46,7 +47,7 @@ jQueryMobile framework.
4647
Currently tested in IE 6-11, Chrome 1-31, Firefox 1.5-27.0, Safari 3-7, Opera 10.6-18.0, iOS 5-7, Android 2.3-4.4,
4748
Amazon Kindle Fire 2 and HD 8.9, Opera Mini 7.
4849

49-
**Required jQuery 1.7+, Zepto 1.0+, or DOMtastic 0.7.3+ (note: `attr`, `class`, `contains`, `data`, `event`, `selector`, and `type` modules are required).**
50+
**Requires jQuery 1.7+, Zepto 1.0+, DOMtastic 0.7.3+ built with `--jquery-compat`, or [jQLight](#jqlight).**
5051

5152

5253
## Download / Install
@@ -152,6 +153,21 @@ PS. In `src` directory you can found `jquery.lazyloadxt.simple.js`, it is initia
152153
with excluded support of on* handlers, lazy* events, `blankImage` option and addons.
153154

154155

156+
## jQLight
157+
158+
LazyLoadXT may be used without jQuery framework by loading small
159+
[`jqlight.lazyloadxt.min.js`](https://raw.github.com/ressio/lazy-load-xt/master/dist/jqlight.lazyloadxt.min.js) script
160+
(1.3KiB gzipped):
161+
162+
```html
163+
<script src="jqlight.lazyloadxt.js"></script>
164+
<script src="jquery.lazyloadxt.js"></script>
165+
166+
<img data-src="lazy.jpg" width="100" height="100">
167+
```
168+
169+
Note: currently `jquery.lazyloadxt.bg.js` addon is not supported by jQLight.
170+
155171
## Demo
156172

157173
Demo: [ressio.github.io/lazy-load-xt](http://ressio.github.io/lazy-load-xt)

src/jqlight.lazyloadxt.js

Lines changed: 254 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,254 @@
1+
/*jslint browser:true, plusplus:true, vars:true */
2+
/*jshint browser:true, jquery:true, eqnull:true */
3+
/*jshint -W040:false */ /* to don't alert on "this" in triggerLoadOrError */
4+
/*jshint -W089:false */
5+
6+
(function (window, document, Element, undefined) {
7+
'use strict';
8+
9+
function Wrapper(collection) {
10+
if (collection) {
11+
for (var i = 0, length = collection.length; i < length; i++) {
12+
this[i] = collection[i];
13+
}
14+
this.length = length;
15+
}
16+
}
17+
18+
function $(selector) {
19+
if (selector instanceof Wrapper) {
20+
return selector;
21+
}
22+
return new Wrapper((typeof selector === 'string') ? document.querySelectorAll(selector)
23+
: (selector && (selector === window || selector.nodeType) ? [selector] : selector));
24+
}
25+
26+
$.fn = {
27+
constructor: Wrapper,
28+
length: 0
29+
};
30+
Wrapper.prototype = $.fn;
31+
32+
$.extend = function (target) {
33+
var options, name, copy, i = 0, length = arguments.length;
34+
if (length <= 1) {
35+
target = this;
36+
} else {
37+
i = 1;
38+
}
39+
for (; i < length; i++) {
40+
options = arguments[i];
41+
for (name in options) {
42+
copy = options[name];
43+
if (copy !== undefined && copy !== target) {
44+
target[name] = copy;
45+
}
46+
}
47+
}
48+
return target;
49+
};
50+
$.fn.extend = $.extend;
51+
52+
var prev_$ = window.$;
53+
window.$ = $;
54+
55+
$.extend({
56+
noConflict: function () {
57+
window.$ = prev_$;
58+
return $;
59+
},
60+
isFunction: function (obj) {
61+
return (typeof obj === 'function');
62+
},
63+
contains: function (a, b) {
64+
if (b) {
65+
while ((b = b.parentNode)) {
66+
if (b === a) {
67+
return true;
68+
}
69+
}
70+
}
71+
return false;
72+
},
73+
each: function (array, callback) {
74+
var value, i = 0, length = array.length;
75+
for (; i < length; i++) {
76+
value = array[i];
77+
if (callback.call(value, i, value) === false) {
78+
return false;
79+
}
80+
}
81+
return true;
82+
},
83+
grep: function (elems, callback, invert) {
84+
var callbackInverse,
85+
matches = [],
86+
i = 0,
87+
length = elems.length,
88+
callbackExpect = !invert;
89+
for (; i < length; i++) {
90+
callbackInverse = !callback(i, elems[i]);
91+
if (callbackInverse !== callbackExpect) {
92+
matches.push(elems[i]);
93+
}
94+
}
95+
return matches;
96+
},
97+
map: function (elems, callback) {
98+
var value,
99+
i = 0,
100+
length = elems.length,
101+
ret = [];
102+
for (; i < length; i++) {
103+
value = callback(i, elems[i]);
104+
if (value != null) {
105+
ret.push(value);
106+
}
107+
}
108+
return ret;
109+
}
110+
});
111+
112+
var DATAKEYPROP = '__jqlight_data__';
113+
$.fn.extend({
114+
each: function (callback, args) {
115+
$.each(this, callback, args);
116+
return this;
117+
},
118+
ready: function (fn) {
119+
if (/complete|loaded|interactive/.test(document.readyState) && document.body) {
120+
fn();
121+
} else {
122+
$(document).on('DOMContentLoaded', fn);
123+
}
124+
return this;
125+
},
126+
addClass: function (value) {
127+
return eachClass(this, value, function (cur, clazz, found) {
128+
return found ? cur : cur + clazz + ' ';
129+
});
130+
},
131+
removeClass: function (value) {
132+
return eachClass(this, value, function (cur, clazz, found) {
133+
return found ? cur.replace(' ' + clazz + ' ', ' ') : cur;
134+
});
135+
},
136+
on: function (types, selector, fn) {
137+
if (fn == null) {
138+
// ( types, fn )
139+
fn = selector;
140+
selector = undefined;
141+
}
142+
types = types.split(' ');
143+
return this.each(function (i, elem) {
144+
var listener = selector ? delegateHandler.bind(elem, selector, fn) : fn;
145+
$.each(types, function (j, eventName) {
146+
if (eventName) {
147+
elem.addEventListener(eventName, listener);
148+
}
149+
});
150+
});
151+
},
152+
off: function (types, selector, fn) {
153+
if (selector === false || $.isFunction(selector)) {
154+
// ( types [, fn] )
155+
fn = selector;
156+
selector = undefined;
157+
}
158+
types = types.split(' ');
159+
return this.each(function (i, elem) {
160+
$.each(types, function (j, eventName) {
161+
if (eventName) {
162+
elem.removeEventListener(eventName, fn);
163+
}
164+
});
165+
});
166+
},
167+
trigger: function (type, data) {
168+
return this.each(function () {
169+
var evt;
170+
if (window.CustomEvent) {
171+
evt = new CustomEvent(type, {detail: data});
172+
} else {
173+
evt = document.createEvent('CustomEvent');
174+
evt.initCustomEvent(type, true, true, data);
175+
}
176+
this.dispatchEvent(evt);
177+
});
178+
},
179+
data: function (key, value) {
180+
if (typeof key === 'string' && value === undefined) {
181+
var elem = this[0];
182+
return elem && elem[DATAKEYPROP] ? elem[DATAKEYPROP][key] : undefined;
183+
}
184+
this.each(function (i, elem) {
185+
elem[DATAKEYPROP] = elem[DATAKEYPROP] || {};
186+
elem[DATAKEYPROP][key] = value;
187+
});
188+
return this;
189+
},
190+
map: function (callback) {
191+
return $($.map(this, callback));
192+
},
193+
filter: function (callback) {
194+
return $($.grep(this, callback));
195+
},
196+
attr: function (name, value) {
197+
if (value === undefined) {
198+
return this.length ? this[0].getAttribute(name) : undefined;
199+
}
200+
$.each(this, function (i, elem) {
201+
elem.setAttribute(name, value + '');
202+
});
203+
return this;
204+
}
205+
});
206+
207+
function eachClass(obj, value, callback) {
208+
var classes = ( value || '' ).match(/\S+/g) || [],
209+
elem, cur, clazz, j, origValue, finalValue,
210+
i = 0,
211+
len = obj.length;
212+
while (i < len) {
213+
elem = obj[i++];
214+
if (elem.nodeType === 1) {
215+
origValue = elem.className;
216+
cur = origValue ? ( ' ' + origValue + ' ' ).replace(/[\t\r\n\f]/g, ' ') : ' ';
217+
j = 0;
218+
while ((clazz = classes[j++])) {
219+
cur = callback(cur, clazz, cur.indexOf(' ' + clazz + ' ') >= 0);
220+
}
221+
finalValue = cur.slice(1, -1);
222+
if (origValue !== finalValue) {
223+
elem.className = finalValue;
224+
}
225+
}
226+
}
227+
return obj;
228+
}
229+
230+
function delegateHandler(selector, handler, event) {
231+
var currentTarget = closest.call([event.target], selector, this)[0];
232+
if (currentTarget && currentTarget !== this) {
233+
handler.call(currentTarget, event);
234+
}
235+
}
236+
237+
var matches = Element.matches || Element.matchesSelector || Element.mozMatchesSelector || Element.msMatchesSelector || Element.oMatchesSelector || Element.webkitMatchesSelector;
238+
239+
function closest(selector, context) {
240+
var nodes = [];
241+
$.each(this, function (i, node) {
242+
while (node && node !== context) {
243+
if (matches.call(node, selector)) {
244+
nodes.push(node);
245+
break;
246+
}
247+
node = node.parentElement;
248+
}
249+
});
250+
return $($.grep(nodes, function (index, item) {
251+
return nodes.indexOf(item) === index;
252+
}));
253+
}
254+
})(window, document, Element.prototype);

test/lazyloadxt-jqlight.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Lazy Load XT Test Suite</title>
6+
<!-- Load local lib and tests. -->
7+
<script src="function_bind.js"></script>
8+
<script src="../src/jqlight.lazyloadxt.js"></script>
9+
<script src="../src/jquery.lazyloadxt.js"></script>
10+
<script src="../src/jquery.lazyloadxt.video.js"></script>
11+
<script>window.jQLight = $.noConflict();</script>
12+
<!-- Load local jQuery. This can be overridden with a ?jquery=___ param. -->
13+
<script src="../libs/jquery-loader.js"></script>
14+
<!-- Load local QUnit. -->
15+
<link rel="stylesheet" href="../libs/qunit/qunit.css" media="screen">
16+
<script src="../libs/qunit/qunit.js"></script>
17+
<script src="lazyloadxt_test.js"></script>
18+
</head>
19+
<body>
20+
<div id="qunit"></div>
21+
<div id="qunit-fixture">
22+
</div>
23+
<div id="visible-container">
24+
<p><img data-src="http://lorempixel.com/300/200/transport/1" width="300" height="200"></p>
25+
<p><img data-src="http://lorempixel.com/300/200/transport/2" width="300" height="200"></p>
26+
<p><img data-src="http://lorempixel.com/300/200/transport/3" width="300" height="200"></p>
27+
<p><img data-src="http://lorempixel.com/300/200/transport/4" width="300" height="200"></p>
28+
<p><img data-src="http://lorempixel.com/300/200/transport/5" width="300" height="200"></p>
29+
<p><img data-src="http://lorempixel.com/300/200/transport/6" width="300" height="200"></p>
30+
<p><img data-src="http://lorempixel.com/300/200/transport/7" width="300" height="200"></p>
31+
<p><img data-src="http://lorempixel.com/300/200/transport/8" width="300" height="200"></p>
32+
<p><img data-src="http://lorempixel.com/300/200/transport/9" width="300" height="200"></p>
33+
<p><img data-src="http://lorempixel.com/300/200/transport/10" width="300" height="200"></p>
34+
</div>
35+
</body>
36+
</html>

test/lazyloadxt_test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,4 +55,4 @@
5555
start();
5656
}, 300);
5757
});
58-
}(window.jQuery || window.Zepto || window.$));
58+
}(window.jQLight || window.jQuery || window.Zepto || window.$));

0 commit comments

Comments
 (0)