").append(n.parseHTML(a)).find(d):a)}).complete(c&&function(a,b){g.each(c,e||[a.responseText,b,a])}),this},n.expr.filters.animated=function(a){return n.grep(n.timers,function(b){return a===b.elem}).length};var dd=a.document.documentElement;function ed(a){return n.isWindow(a)?a:9===a.nodeType?a.defaultView||a.parentWindow:!1}n.offset={setOffset:function(a,b,c){var d,e,f,g,h,i,j,k=n.css(a,"position"),l=n(a),m={};"static"===k&&(a.style.position="relative"),h=l.offset(),f=n.css(a,"top"),i=n.css(a,"left"),j=("absolute"===k||"fixed"===k)&&n.inArray("auto",[f,i])>-1,j?(d=l.position(),g=d.top,e=d.left):(g=parseFloat(f)||0,e=parseFloat(i)||0),n.isFunction(b)&&(b=b.call(a,c,h)),null!=b.top&&(m.top=b.top-h.top+g),null!=b.left&&(m.left=b.left-h.left+e),"using"in b?b.using.call(a,m):l.css(m)}},n.fn.extend({offset:function(a){if(arguments.length)return void 0===a?this:this.each(function(b){n.offset.setOffset(this,a,b)});var b,c,d={top:0,left:0},e=this[0],f=e&&e.ownerDocument;if(f)return b=f.documentElement,n.contains(b,e)?(typeof e.getBoundingClientRect!==L&&(d=e.getBoundingClientRect()),c=ed(f),{top:d.top+(c.pageYOffset||b.scrollTop)-(b.clientTop||0),left:d.left+(c.pageXOffset||b.scrollLeft)-(b.clientLeft||0)}):d},position:function(){if(this[0]){var a,b,c={top:0,left:0},d=this[0];return"fixed"===n.css(d,"position")?b=d.getBoundingClientRect():(a=this.offsetParent(),b=this.offset(),n.nodeName(a[0],"html")||(c=a.offset()),c.top+=n.css(a[0],"borderTopWidth",!0),c.left+=n.css(a[0],"borderLeftWidth",!0)),{top:b.top-c.top-n.css(d,"marginTop",!0),left:b.left-c.left-n.css(d,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||dd;while(a&&!n.nodeName(a,"html")&&"static"===n.css(a,"position"))a=a.offsetParent;return a||dd})}}),n.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(a,b){var c=/Y/.test(b);n.fn[a]=function(d){return W(this,function(a,d,e){var f=ed(a);return void 0===e?f?b in f?f[b]:f.document.documentElement[d]:a[d]:void(f?f.scrollTo(c?n(f).scrollLeft():e,c?e:n(f).scrollTop()):a[d]=e)},a,d,arguments.length,null)}}),n.each(["top","left"],function(a,b){n.cssHooks[b]=Mb(l.pixelPosition,function(a,c){return c?(c=Kb(a,b),Ib.test(c)?n(a).position()[b]+"px":c):void 0})}),n.each({Height:"height",Width:"width"},function(a,b){n.each({padding:"inner"+a,content:b,"":"outer"+a},function(c,d){n.fn[d]=function(d,e){var f=arguments.length&&(c||"boolean"!=typeof d),g=c||(d===!0||e===!0?"margin":"border");return W(this,function(b,c,d){var e;return n.isWindow(b)?b.document.documentElement["client"+a]:9===b.nodeType?(e=b.documentElement,Math.max(b.body["scroll"+a],e["scroll"+a],b.body["offset"+a],e["offset"+a],e["client"+a])):void 0===d?n.css(b,c,g):n.style(b,c,d,g)},b,f?d:void 0,f,null)}})}),n.fn.size=function(){return this.length},n.fn.andSelf=n.fn.addBack,"function"==typeof define&&define.amd&&define("jquery",[],function(){return n});var fd=a.jQuery,gd=a.$;return n.noConflict=function(b){return a.$===n&&(a.$=gd),b&&a.jQuery===n&&(a.jQuery=fd),n},typeof b===L&&(a.jQuery=a.$=n),n});
diff --git a/php/pic_lazyload_demo/js/jquery.lazyload.js b/php/pic_lazyload_demo/js/jquery.lazyload.js
new file mode 100755
index 0000000..0b6bdeb
--- /dev/null
+++ b/php/pic_lazyload_demo/js/jquery.lazyload.js
@@ -0,0 +1,164 @@
+/*
+ * Lazy Load - jQuery plugin for lazy loading images
+ *
+ * Copyright (c) 2007-2009 Mika Tuupola
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Project home:
+ * http://www.appelsiini.net/projects/lazyload
+ *
+ * Version: 1.5.0
+ *
+ */
+(function($) {
+
+ $.fn.lazyload = function(options) {
+ var settings = {
+ threshold : 0,
+ failurelimit : 0,
+ event : "scroll",
+ effect : "show",
+ container : window
+ };
+
+ if(options) {
+ $.extend(settings, options);
+ }
+
+ /* Fire one scroll event per scroll. Not one scroll event per image. */
+ var elements = this;
+ if ("scroll" == settings.event) {
+ $(settings.container).bind("scroll", function(event) {
+
+ var counter = 0;
+ elements.each(function() {
+ if ($.abovethetop(this, settings) ||
+ $.leftofbegin(this, settings)) {
+ /* Nothing. */
+ } else if (!$.belowthefold(this, settings) &&
+ !$.rightoffold(this, settings)) {
+ $(this).trigger("appear");
+ } else {
+ if (counter++ > settings.failurelimit) {
+ return false;
+ }
+ }
+ });
+ /* Remove image from array so it is not looped next time. */
+ var temp = $.grep(elements, function(element) {
+ return !element.loaded;
+ });
+ elements = $(temp);
+ });
+ }
+
+ this.each(function() {
+ var self = this;
+
+ /* Save original only if it is not defined in HTML. */
+ if (undefined == $(self).attr("original")) {
+ $(self).attr("original", $(self).attr("original"));
+ }
+
+ if ("scroll" != settings.event ||
+ undefined == $(self).attr("src") ||
+ settings.placeholder == $(self).attr("src") ||
+ ($.abovethetop(self, settings) ||
+ $.leftofbegin(self, settings) ||
+ $.belowthefold(self, settings) ||
+ $.rightoffold(self, settings) )) {
+
+ if (settings.placeholder) {
+ $(self).attr("src", settings.placeholder);
+ } else {
+ $(self).removeAttr("src");
+ }
+ self.loaded = false;
+ } else {
+ self.loaded = true;
+ }
+
+ /* When appear is triggered load original image. */
+ $(self).one("appear", function() {
+ if (!this.loaded) {
+ $("
![]()
")
+ .bind("load", function() {
+ $(self)
+ .hide()
+ .attr("src", $(self).attr("original"))
+ [settings.effect](settings.effectspeed);
+ self.loaded = true;
+ })
+ .attr("src", $(self).attr("original"));
+ };
+ });
+
+ /* When wanted event is triggered load original image */
+ /* by triggering appear. */
+ if ("scroll" != settings.event) {
+ $(self).bind(settings.event, function(event) {
+ if (!self.loaded) {
+ $(self).trigger("appear");
+ }
+ });
+ }
+ });
+
+ /* Force initial check if images should appear. */
+ $(settings.container).trigger(settings.event);
+
+ return this;
+
+ };
+
+ /* Convenience methods in jQuery namespace. */
+ /* Use as $.belowthefold(element, {threshold : 100, container : window}) */
+
+ $.belowthefold = function(element, settings) {
+ if (settings.container === undefined || settings.container === window) {
+ var fold = $(window).height() + $(window).scrollTop();
+ } else {
+ var fold = $(settings.container).offset().top + $(settings.container).height();
+ }
+ return fold <= $(element).offset().top - settings.threshold;
+ };
+
+ $.rightoffold = function(element, settings) {
+ if (settings.container === undefined || settings.container === window) {
+ var fold = $(window).width() + $(window).scrollLeft();
+ } else {
+ var fold = $(settings.container).offset().left + $(settings.container).width();
+ }
+ return fold <= $(element).offset().left - settings.threshold;
+ };
+
+ $.abovethetop = function(element, settings) {
+ if (settings.container === undefined || settings.container === window) {
+ var fold = $(window).scrollTop();
+ } else {
+ var fold = $(settings.container).offset().top;
+ }
+ return fold >= $(element).offset().top + settings.threshold + $(element).height();
+ };
+
+ $.leftofbegin = function(element, settings) {
+ if (settings.container === undefined || settings.container === window) {
+ var fold = $(window).scrollLeft();
+ } else {
+ var fold = $(settings.container).offset().left;
+ }
+ return fold >= $(element).offset().left + settings.threshold + $(element).width();
+ };
+ /* Custom selectors for your convenience. */
+ /* Use as $("img:below-the-fold").something() */
+
+ $.extend($.expr[':'], {
+ "below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",
+ "above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})",
+ "right-of-fold" : "$.rightoffold(a, {threshold : 0, container: window})",
+ "left-of-fold" : "!$.rightoffold(a, {threshold : 0, container: window})"
+ });
+
+})(jQuery);
\ No newline at end of file
diff --git a/php/pic_lazyload_demo/js/loading.gif b/php/pic_lazyload_demo/js/loading.gif
new file mode 100755
index 0000000000000000000000000000000000000000..38bc5050c364a7187ecc25f231bf6d00a991a9ca
GIT binary patch
literal 1093
zcmZ?wbhEHbWMW`qXkcJ?c>f*)1B2p!?g-xi1((E
h+i
z#(Mch>H3D2mX;thjEr=FDs+o0^GXscbn}XpVJ5hw7AF^F7L;V>=P7_pOiaozEwNPs
zx)kDt+yc0Ixnujbty?y4+PGo;y0vRouUffc`Ld-;7B5=3VE(+hb7s$)Ib-^?
zsZ%CTnmD1queYbWtFxoMt+l1Osj;EHuC}JSsEZKEj1-M
zDKQ~FE;c4QDl#HGEHorIC@{d^&)3J>%hSW%&DF)($
+
+###第二步:定义图片标签结构
+修改 HTML 的结构,在 img 标签中添加新的属性,把 src 属性的值指向占位图片,添加 data-original 属性,让其指向真正的图像地址。
+```php
+
+```
+注意: 特殊图片不需按照lazyload.js官方格式。
+###第三步:触发
+```php
+jQuery(document).ready(
+ function($){
+ $("img:not(.noLazy)").lazyload({
+ placeholder : "/js/loading.gif",/*预加载图片*/
+ effect : "fadeIn"/*自定义效果*/
+ });
+})
+```
diff --git a/php/pic_lazyload_demo/pic_lazyload.html b/php/pic_lazyload_demo/pic_lazyload.html
new file mode 100755
index 0000000..a31566a
--- /dev/null
+++ b/php/pic_lazyload_demo/pic_lazyload.html
@@ -0,0 +1,99 @@
+
+
+
+
+
+
+懒惰加载图片demo
+
+
+
+
+
+
+
+
+
+
+ 首页 |
+ 产品 |
+ 经典案例 |
+ 联系方式 |
+ 我的github
+
+
+
+
+

+
+
+
+
**********================================= 延迟 * 加载 ===================================**********
+
+
+
+
+
+
+
+
diff --git a/php/pic_lazyload_demo/picture/1.jpg b/php/pic_lazyload_demo/picture/1.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..12b614478c550823529d143c5a3776cb484dce72
GIT binary patch
literal 130006
zcmeFYXH-+c`z{&;rGxY)MS2lXdPhY-KtOs26%<1VksiAA4uTY=N(bpBgqlc~E?t6v
z2~A2Mp@x3={qH^Jtb4!Qd(K+-+nv4VOZH^;`^?OqdFFZFx&D3q7jRcsOGgVpL_`F5
zb#no(7XTUn;#;@=bKfMAoBKA|?b{?Iw<$%jxePiu^4E{e8(XAUB?~sy_Q&8R%fZYY$A|fWfMMC@^t8YpN-8=`7
z(A}oL|LDmb2BX)cyzY!rp(zDqd{67Un2aZI{L*hc!pJF@SyVC<
zl{B7dYH2^$(KRtOGq6zKN-}5LmW@UA4edFKe7JmQW@aXu2
zaC-J1Ttook{{zl?L;u8x^tC$!uT&@*
zXk*1)w4(y6HS(I)FOh
zbh$sD>56$F@B#iR^zWBItIL8FPV)hy)McCIW}6_@SAIGDpS7iBTBYxjCn^|a?I+q`
zP7=MBN#>#IMtFmY05piVbU{07Eel28x&R~p(Z7;h?E^Yj*gli*QfGl~^s&ozqAQw)
zbLGU9IQ0xtQDXmgtzYg|^CosZ1D!xmTe0@4b}0!aX)Jod2lNFlZp^{cb1YUr;oH%*LakKvYk!c>jfL*+lm
zSqwmul*|yF7;)vECH`67yyad5dE1i!h-{tH?I&J3g&)Q!_H5D5W%sWE7ow63peuPi
zZS=)`^dhLw11RtLc(??(zo=WDDn;rYYapFm;