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