diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5927832..8459188 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+# v0.3.0 / 2016-02-17
+
+* Added data-lazyload attribute to load content.
+* Added script type="text/lazyload" to load content.
+* Supported text content.
+
# v0.2.3 / 2014-10-21
* Add refresh method for element move.
diff --git a/LICENSE.txt b/LICENSE.txt
index 58074d3..061a3c0 100644
--- a/LICENSE.txt
+++ b/LICENSE.txt
@@ -1,4 +1,6 @@
-Copyright 2014-2015 emn178@gmail.com
+Copyright (c) 2014-2016 Yi-Cyuan Chen
+
+MIT License
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
diff --git a/README.md b/README.md
index ed42cda..467a51f 100644
--- a/README.md
+++ b/README.md
@@ -1,23 +1,40 @@
# jQuery-lazyload-any
A jQuery plugin provides a lazyload function for images, iframe or anything.
-## Download
-[Compress](https://raw.github.com/emn178/jquery-lazyload-any/master/build/jquery.lazyload-any.min.js)
-[Uncompress](https://raw.github.com/emn178/jquery-lazyload-any/master/src/jquery.lazyload-any.js)
-
## Demo
[Images](http://emn178.github.io/jquery-lazyload-any/samples/images/) ([Overflow and Tabs](http://emn178.github.io/jquery-lazyload-any/samples/overflow/))
[Youtube](http://emn178.github.io/jquery-lazyload-any/samples/youtube/)
-## Browser Support
-jQuery-lazyload-any currently supports IE7+, Chrome, Firefox, Safari and Opera.
+## Download
+[Compress](https://raw.github.com/emn178/jquery-lazyload-any/master/build/jquery.lazyload-any.min.js)
+[Uncompress](https://raw.github.com/emn178/jquery-lazyload-any/master/src/jquery.lazyload-any.js)
+
+## Installation
+You can install jquery-lazyload-any by using Bower.
+```
+bower install jquery-lazyload-any
+```
## Usage
-HTML
+HTML
+*Attribute Style*
+```HTML
+
+
+```
+*Script Style*
+```HTML
+
+
+
+```
+*Comment Style*
```HTML
```
@@ -25,6 +42,7 @@ JavaScript
```JavaScript
$('#you-want-lazyload').lazyload(options);
```
+You should choose only one style. When multiple styles set, priority is Attribute > Script > Comment.
### Options
#### *threshold: `Number` (default: `0`)*
@@ -93,15 +111,9 @@ $('.lazyload').lazyload({
});
```
-## Installation
-You can install jquery-lazyload-any by using Bower.
-```
-bower install jquery-lazyload-any
-```
-
## License
The project is released under the [MIT license](http://www.opensource.org/licenses/MIT).
## Contact
The project's website is located at https://github.com/emn178/jquery-lazyload-any
-Author: emn178@gmail.com
+Author: Yi-Cyuan Chen (emn178@gmail.com)
diff --git a/bower.json b/bower.json
index 94f641d..6f87f7a 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
{
"name": "jquery-lazyload-any",
- "version": "0.2.3",
- "main": ["build/jquery.lazyload-any.min.js"],
+ "version": "0.3.0",
+ "main": ["src/jquery.lazyload-any.js"],
"ignore": [
"samples",
"tests"
diff --git a/build/jquery.lazyload-any.min.js b/build/jquery.lazyload-any.min.js
index fb175f3..560c63d 100644
--- a/build/jquery.lazyload-any.min.js
+++ b/build/jquery.lazyload-any.min.js
@@ -1,6 +1,14 @@
-(function(c,k,l,m){function n(){var a=c(this),b;if(b=a.is(":visible")){b=a[0].getBoundingClientRect();var d=-a.data("jquery-lazyload-any").threshold,e=p-d,f=q-d;b=(b.top>=d&&b.top<=e||b.bottom>=d&&b.bottom<=e)&&(b.left>=d&&b.left<=f||b.right>=d&&b.right<=f)}b&&a.trigger("appear")}function r(){p=k.innerHeight||l.documentElement.clientHeight;q=k.innerWidth||l.documentElement.clientWidth;g()}function g(){h=h.filter(":jquery-lazyload-any-appear");1==this.nodeType?c(this).find(":jquery-lazyload-any-appear").each(n):
-h.each(n)}function w(){var a=c(this),b=a.data("jquery-lazyload-any"),d=a.contents().filter(function(){return 8===this.nodeType}).get(0),d=c(d&&c.trim(d.data));a.replaceWith(d);c.isFunction(b.load)&&b.load.call(d,d)}function t(){var a=c(this),b;a.data("jquery-lazyload-any-scroller")?b=!1:(b=a.css("overflow"),"scroll"!=b&&"auto"!=b?b=!1:(a.data("jquery-lazyload-any-scroller",1),a.bind("scroll",g),b=!0));var d;a.data("jquery-lazyload-any-display")?d=void 0:"none"!=a.css("display")?d=void 0:(a.data("jquery-lazyload-any-display",
-1),a._bindShow(g),d=!0);b|d&&!a.data("jquery-lazyload-any-watch")&&(a.data("jquery-lazyload-any-watch",1),a.bind("appear",u))}function u(){var a=c(this);0===a.find(":jquery-lazyload-any-appear").length&&(a.removeData("jquery-lazyload-any-scroller").removeData("jquery-lazyload-any-display").removeData("jquery-lazyload-any-watch"),a.unbind("scroll",g).unbind("appear",u)._unbindShow(g))}var p,q,v=!1,h=c();c.expr[":"]["jquery-lazyload-any-appear"]=function(a){return c(a).data("jquery-lazyload-any-appear")!==
-m};c.fn.lazyload=function(a){var b={threshold:0,trigger:"appear"};c.extend(b,a);a=b.trigger.split(" ");this.data("jquery-lazyload-any-appear",-1!=c.inArray("appear",a)).data("jquery-lazyload-any",b);this.bind(b.trigger,w);this.each(n);this.parents().each(t);this.each(function(){h=h.add(this)});v||(v=!0,r(),c(l).ready(function(){c(k).bind("resize",r).bind("scroll",g)}));return this};c.lazyload={check:g,refresh:function(a){(a===m?h:c(a)).each(function(){var a=c(this);a.is(":jquery-lazyload-any-appear")&&
-a.parents().each(t)})}};(function(){function a(){var a=c(this),b="none"!=a.css("display");a.data("jquery-lazyload-any-show")!=b&&(a.data("jquery-lazyload-any-show",b),b&&a.trigger("show"))}function b(){f=f.filter(":jquery-lazyload-any-show");f.each(a);0===f.length&&(e=clearInterval(e))}var d=50,e,f=c();c.expr[":"]["jquery-lazyload-any-show"]=function(a){return c(a).data("jquery-lazyload-any-show")!==m};c.fn._bindShow=function(a){this.bind("show",a);this.data("jquery-lazyload-any-show","none"!=this.css("display"));
-f=f.add(this);d&&!e&&(e=setInterval(b,d))};c.fn._unbindShow=function(a){this.unbind("show",a);this.removeData("jquery-lazyload-any-show")};c.lazyload.setInterval=function(a){a==d||!c.isNumeric(a)||0>a||(d=a,e=clearInterval(e),0=b&&c.top<=e||c.bottom>=b&&c.bottom<=e)&&(c.left>=b&&c.left<=f||c.right>=b&&c.right<=f)}c&&a.trigger("appear")}function q(){n=k.innerHeight||l.documentElement.clientHeight;p=k.innerWidth||l.documentElement.clientWidth;g()}function g(){h=h.filter(":jquery-lazyload-any-appear");1==this.nodeType?d(this).find(":jquery-lazyload-any-appear").each(m):
+h.each(m)}function v(){var a=d(this),c=a.data("jquery-lazyload-any"),b=a.data("lazyload");b||(b=a.children().filter('script[type="text/lazyload"]').get(0),b=d(b).html());b||(b=(b=a.contents().filter(function(){return 8===this.nodeType}).get(0))&&d.trim(b.data));b=w.html(b).contents();a.replaceWith(b);d.isFunction(c.load)&&c.load.call(b,b)}function r(){var a=d(this),c;a.data("jquery-lazyload-any-scroller")?c=!1:(c=a.css("overflow"),"scroll"!=c&&"auto"!=c?c=!1:(a.data("jquery-lazyload-any-scroller",
+1),a.bind("scroll",g),c=!0));var b;a.data("jquery-lazyload-any-display")?b=void 0:"none"!=a.css("display")?b=void 0:(a.data("jquery-lazyload-any-display",1),a._bindShow(g),b=!0);c|b&&!a.data("jquery-lazyload-any-watch")&&(a.data("jquery-lazyload-any-watch",1),a.bind("appear",t))}function t(){var a=d(this);0===a.find(":jquery-lazyload-any-appear").length&&(a.removeData("jquery-lazyload-any-scroller").removeData("jquery-lazyload-any-display").removeData("jquery-lazyload-any-watch"),a.unbind("scroll",
+g).unbind("appear",t)._unbindShow(g))}var w=d(""),n,p,u=!1,h=d();d.expr[":"]["jquery-lazyload-any-appear"]=function(a){return void 0!==d(a).data("jquery-lazyload-any-appear")};d.fn.lazyload=function(a){var c={threshold:0,trigger:"appear"};d.extend(c,a);a=c.trigger.split(" ");this.data("jquery-lazyload-any-appear",-1!=d.inArray("appear",a)).data("jquery-lazyload-any",c);this.bind(c.trigger,v);this.each(m);this.parents().each(r);this.each(function(){h=h.add(this)});u||(u=!0,q(),d(l).ready(function(){d(k).bind("resize",
+q).bind("scroll",g)}));return this};d.lazyload={check:g,refresh:function(a){(void 0===a?h:d(a)).each(function(){var a=d(this);a.is(":jquery-lazyload-any-appear")&&a.parents().each(r)})}};(function(){function a(){var a=d(this),b="none"!=a.css("display");a.data("jquery-lazyload-any-show")!=b&&(a.data("jquery-lazyload-any-show",b),b&&a.trigger("show"))}function c(){f=f.filter(":jquery-lazyload-any-show");f.each(a);0===f.length&&(e=clearInterval(e))}var b=50,e,f=d();d.expr[":"]["jquery-lazyload-any-show"]=
+function(a){return void 0!==d(a).data("jquery-lazyload-any-show")};d.fn._bindShow=function(a){this.bind("show",a);this.data("jquery-lazyload-any-show","none"!=this.css("display"));f=f.add(this);b&&!e&&(e=setInterval(c,b))};d.fn._unbindShow=function(a){this.unbind("show",a);this.removeData("jquery-lazyload-any-show")};d.lazyload.setInterval=function(a){a==b||!d.isNumeric(a)||0>a||(b=a,e=clearInterval(e),0
Lazyload Images
-
+
-
+
@@ -177,11 +178,11 @@ Aquaman
}
$('.lazyload').lazyload({load: load});
-
-
-
-
-
+
+
+
+
+
diff --git a/samples/overflow/index.html b/samples/overflow/index.html
index 83b60ea..7855fa3 100644
--- a/samples/overflow/index.html
+++ b/samples/overflow/index.html
@@ -3,21 +3,22 @@
Overflow and Tabs
-
+
-
-
+
+
@@ -188,11 +189,11 @@ Aquaman
$( "#tabs" ).tabs();
$('.lazyload').lazyload({load: load});
-
-
-
-
-
+
+
+
+
+
diff --git a/samples/youtube/index.html b/samples/youtube/index.html
index 6dce8be..2f99112 100644
--- a/samples/youtube/index.html
+++ b/samples/youtube/index.html
@@ -3,19 +3,20 @@
Lazyload Youtube
-
+
-
+
@@ -243,11 +244,11 @@ Aquaman
$('.lazyload-thumbnail').lazyload({load: load});
$('.lazyload-youtube').lazyload({trigger: 'click'});
-
-
-
-
-
+
+
+
+
+
diff --git a/src/jquery.lazyload-any.js b/src/jquery.lazyload-any.js
index 042bd9c..bb8fd97 100644
--- a/src/jquery.lazyload-any.js
+++ b/src/jquery.lazyload-any.js
@@ -1,13 +1,12 @@
-/*
- * jQuery-lazyload-any v0.2.3
- * https://github.com/emn178/jquery-lazyload-any
+/**
+ * [jQuery-lazyload-any]{@link https://github.com/emn178/jquery-lazyload-any}
*
- * Copyright 2014-2015, emn178@gmail.com
- *
- * Licensed under the MIT license:
- * http://www.opensource.org/licenses/MIT
+ * @version 0.3.0
+ * @author Yi-Cyuan Chen [emn178@gmail.com]
+ * @copyright Yi-Cyuan Chen 2014-2016
+ * @license MIT
*/
-;(function($, window, document, undefined) {
+(function ($, window, document) {
var KEY = 'jquery-lazyload-any';
var EVENT = 'appear';
var SELECTOR_KEY = KEY + '-' + EVENT;
@@ -15,15 +14,16 @@
var SCROLLER_KEY = KEY + '-scroller';
var DISPLAY_KEY = KEY + '-display';
var WATCH_KEY = KEY + '-watch';
+ var DIV = $('');
var screenHeight, screenWidth, init = false, observations = $();
- $.expr[':'][SELECTOR_KEY] = function(element) {
+ $.expr[':'][SELECTOR_KEY] = function (element) {
return $(element).data(SELECTOR_KEY) !== undefined;
};
function test() {
var element = $(this);
- if(element.is(':visible') && visible(element)) {
+ if (element.is(':visible') && visible(element)) {
element.trigger(EVENT);
}
}
@@ -46,7 +46,7 @@
function detect() {
observations = observations.filter(SELECTOR);
- if(this.nodeType == 1) {
+ if (this.nodeType == 1) {
$(this).find(SELECTOR).each(test);
} else {
observations.each(test);
@@ -56,23 +56,30 @@
function show() {
var element = $(this);
var options = element.data(KEY);
- var comment = element.contents().filter(function() {
- return this.nodeType === 8;
- }).get(0);
- var newElement = $(comment && $.trim(comment.data));
+ var content = element.data('lazyload');
+ if (!content) {
+ var script = element.children().filter('script[type="text/lazyload"]').get(0);
+ content = $(script).html();
+ }
+ if (!content) {
+ var comment = element.contents().filter(function () {
+ return this.nodeType === 8;
+ }).get(0);
+ content = comment && $.trim(comment.data);
+ }
+ var newElement = DIV.html(content).contents();
element.replaceWith(newElement);
-
- if($.isFunction(options.load)) {
+ if ($.isFunction(options.load)) {
options.load.call(newElement, newElement);
}
}
function watch() {
var element = $(this);
- if(!(watchScroller(element) | watchDisplay(element))) {
+ if (!(watchScroller(element) | watchDisplay(element))) {
return;
}
- if(element.data(WATCH_KEY)) {
+ if (element.data(WATCH_KEY)) {
return;
}
element.data(WATCH_KEY, 1);
@@ -80,11 +87,11 @@
}
function watchScroller(element) {
- if(element.data(SCROLLER_KEY)) {
+ if (element.data(SCROLLER_KEY)) {
return false;
}
var overflow = element.css('overflow');
- if(overflow != 'scroll' && overflow != 'auto') {
+ if (overflow != 'scroll' && overflow != 'auto') {
return false;
}
element.data(SCROLLER_KEY, 1);
@@ -93,11 +100,11 @@
}
function watchDisplay(element) {
- if(element.data(DISPLAY_KEY)) {
+ if (element.data(DISPLAY_KEY)) {
return;
}
var display = element.css('display');
- if(display != 'none') {
+ if (display != 'none') {
return;
}
element.data(DISPLAY_KEY, 1);
@@ -107,7 +114,7 @@
function clearWatch() {
var element = $(this);
- if(element.find(SELECTOR).length === 0) {
+ if (element.find(SELECTOR).length === 0) {
element.removeData(SCROLLER_KEY).removeData(DISPLAY_KEY).removeData(WATCH_KEY);
element.unbind('scroll', detect).unbind(EVENT, clearWatch)._unbindShow(detect);
}
@@ -115,16 +122,16 @@
function refresh(selector) {
var elements = selector === undefined ? observations : $(selector);
- elements.each(function() {
+ elements.each(function () {
var element = $(this);
- if(!element.is(SELECTOR)) {
+ if (!element.is(SELECTOR)) {
return;
}
element.parents().each(watch);
});
}
- $.fn.lazyload = function(options) {
+ $.fn.lazyload = function (options) {
var opts = {
threshold: 0,
trigger: EVENT
@@ -135,14 +142,14 @@
this.bind(opts.trigger, show);
this.each(test);
this.parents().each(watch);
- this.each(function() {
+ this.each(function () {
observations = observations.add(this);
});
- if(!init) {
+ if (!init) {
init = true;
resize();
- $(document).ready(function() {
+ $(document).ready(function () {
$(window).bind('resize', resize).bind('scroll', detect);
});
}
@@ -155,22 +162,22 @@
};
// SHOW EVENT
- (function() {
+ (function () {
var EVENT = 'show';
var SELECTOR_KEY = KEY + '-' + EVENT;
var SELECTOR = ':' + SELECTOR_KEY;
var interval = 50, timer, observations = $();
- $.expr[':'][SELECTOR_KEY] = function(element) {
+ $.expr[':'][SELECTOR_KEY] = function (element) {
return $(element).data(SELECTOR_KEY) !== undefined;
};
function test() {
var element = $(this);
var status = element.css('display') != 'none';
- if(element.data(SELECTOR_KEY) != status) {
+ if (element.data(SELECTOR_KEY) != status) {
element.data(SELECTOR_KEY, status);
- if(status) {
+ if (status) {
element.trigger(EVENT);
}
}
@@ -179,32 +186,32 @@
function detect() {
observations = observations.filter(SELECTOR);
observations.each(test);
- if(observations.length === 0) {
+ if (observations.length === 0) {
timer = clearInterval(timer);
}
}
- $.fn._bindShow = function(handler) {
+ $.fn._bindShow = function (handler) {
this.bind(EVENT, handler);
this.data(SELECTOR_KEY, this.css('display') != 'none');
observations = observations.add(this);
- if(interval && !timer) {
+ if (interval && !timer) {
timer = setInterval(detect, interval);
}
};
- $.fn._unbindShow = function(handler) {
+ $.fn._unbindShow = function (handler) {
this.unbind(EVENT, handler);
this.removeData(SELECTOR_KEY);
};
- $.lazyload.setInterval = function(v) {
- if(v == interval || !$.isNumeric(v) || v < 0) {
+ $.lazyload.setInterval = function (value) {
+ if (value == interval || !$.isNumeric(value) || value < 0) {
return;
}
- interval = v;
+ interval = value;
timer = clearInterval(timer);
- if(interval > 0) {
+ if (interval > 0) {
timer = setInterval(detect, interval);
}
};
diff --git a/tests/index.html b/tests/index.html
index babc417..ec2a21b 100644
--- a/tests/index.html
+++ b/tests/index.html
@@ -3,12 +3,30 @@
Document
-
+
- Tab Test
+ Script
+
+
+
+
+ Attribute
+
+
+
+ Text
+
+
+
+
+ Tab
@@ -21,7 +39,7 @@
Tab Test
- Overflow Test
+ Overflow
@@ -36,7 +54,7 @@ Overflow Test
-->
- Horizontal Test
+ Horizontal
@@ -45,7 +63,7 @@ Horizontal Test
-->
- Vertical Test
+ Vertical