Changeset 1030214
- Timestamp:
- 11/21/2014 03:55:25 PM (11 years ago)
- Location:
- smart-image-loader/trunk
- Files:
-
- 4 edited
-
plugin.php (modified) (3 diffs)
-
readme.txt (modified) (2 diffs)
-
smart_image_loader.js (modified) (15 diffs)
-
smart_image_loader.min.js (modified) (1 diff)
Legend:
- Unmodified
- Added
- Removed
-
smart-image-loader/trunk/plugin.php
r1018860 r1030214 4 4 Plugin URI: https://wordpress.org/plugins/smart-image-loader 5 5 Description: Load images visible at page load ('above the fold') first for a fast page loading impression. Optional lazy loading for images 'below the fold'. 6 Version: 0. 3.96 Version: 0.4.0 7 7 Text Domain: smart-image-loader 8 8 Author: Bayer und Preuss … … 62 62 } 63 63 64 $i = 0; 64 65 65 foreach( $html->find($selector) as $element ) 66 66 { … … 70 70 if ( count( array_intersect($classes, $exclude_classes) ) > 0 || preg_match( '/\.php/', $element->src) ) continue; 71 71 72 $class_id = 'sil-' . $i++; 72 73 if ( !isset($GLOBALS['sil_id']) ) $GLOBALS['sil_id'] = 0; 74 75 $class_id = 'sil-' . $GLOBALS['sil_id']++; 73 76 74 77 $element_empty_html = str_get_html( $element->outertext ); -
smart-image-loader/trunk/readme.txt
r1013273 r1030214 5 5 Requires at least: 3.8.3 6 6 Tested up to: 4.0 7 Stable tag: 0. 3.97 Stable tag: 0.4.0 8 8 License: GPLv2 or later 9 9 License URI: http://www.gnu.org/licenses/gpl-2.0.html … … 34 34 35 35 == Changelog == 36 37 = 0.4.0 = 38 * fixed some rather serious issues 39 * fixed js strict error in unminified file 40 * exposing sil_refresh() _before_ document ready 41 * added more events! document.sil_load, document.sil_load_visible, document.sil_load_all 36 42 37 43 = 0.3.9 = -
smart-image-loader/trunk/smart_image_loader.js
r1022826 r1030214 1 jQuery(function($){ 1 (function($) { 2 3 // Version: 0.4.0 2 4 3 5 "use strict"; … … 48 50 $wrapping_image, 49 51 $wrapped_images, 52 $loading_images, 50 53 $html_body, 51 54 $noscripts, … … 204 207 205 208 206 refresh_data = function( $elements , update_view)209 refresh_data = function( $elements ) 207 210 { 208 211 … … 225 228 doc_height = $(d).height(); 226 229 227 if ( update_view )228 {229 var callback = lazyload ? null : load_all_images;230 231 load_visible_images( callback, true );232 }233 230 234 231 }, … … 311 308 ////////////////////////////////////////////////////////////////////////////////////// 312 309 313 load_image = function( wrapping_image, on_load_callback, fade)310 load_image = function( wrapping_image, on_load_callback, override_fading ) 314 311 { 315 312 … … 325 322 326 323 327 if ( sil_options.fade && fade ) 324 325 if ( sil_options.fade && !override_fading ) 328 326 { 329 327 $wrapping_image.data({ opacity: $wrapping_image.css('opacity') }).css({ opacity: '0' }); … … 337 335 $wrapping_image.attr( 'src', $noscript.attr('title') ); 338 336 337 $loading_images = $loading_images.add( $wrapping_image ); 338 339 340 // waiting one frame for the image to affect layout and refresh data. sometimes it's not enough, so we'll do it again on load. 339 341 requestAnimationFrame(function () { 340 342 341 // sometimes the one frame is not enough so we will refresh_data again on load342 343 if ( !has_absolute_size(wrapping_image) ) 343 344 { 344 refresh_data( $wrapped_images, true ); 345 refresh_data( $wrapped_images ); 346 load_visible_images(); 345 347 } 346 348 }); … … 354 356 355 357 356 load_visible_images = function( on_all_visible_load_callback, fade ) 357 { 358 359 var $visible_images = $wrapped_images.filter( is_visible ), 360 images_to_load = $visible_images.length, 361 images_loaded = 0; 362 363 if ( images_to_load === 0 && typeof on_all_visible_load_callback == 'function' ) 364 { 365 on_all_visible_load_callback(); 366 } 367 else 368 { 369 $visible_images.each( function(i, image){ 370 371 // trigger image loading 372 load_image( image, function(e){ 373 374 on_image_load(e); 375 376 images_loaded = i+1; 377 378 // has the document layout changed after the source has been inserted? 379 if ( !has_absolute_size(e.target) ) 380 { 381 refresh_data( $wrapped_images, true ); 382 } 383 384 if ( images_loaded == images_to_load ) 385 { 386 $document.trigger('sil_load_visible'); 387 388 if ( typeof on_all_visible_load_callback == 'function' ) 389 { 390 on_all_visible_load_callback(); 391 } 392 } 393 394 }, fade ); 358 load_visible_images = function( override_fading ) 359 { 360 361 var $images_to_load = $wrapped_images.filter( is_visible ); 362 363 if ( $images_to_load.length > 0 ) 364 { 365 $images_to_load.each( function(i, image){ 395 366 396 367 // remove load triggered image from object … … 399 370 if ( this !== image ) return this; 400 371 }); 372 373 // trigger image loading 374 load_image( image, on_image_load, override_fading ); 375 401 376 }); 402 377 } 403 404 378 405 379 }, … … 438 412 { 439 413 440 $document.trigger('sil_load'); 441 442 all_loaded = $wrapped_images.length > 0 ? false : true; 443 444 if ( all_loaded ) 445 { 446 $document.trigger('sil_load_all'); 447 } 414 var $images_to_load, $images_waiting; 415 416 $document.trigger('sil_load', e.target); 417 418 // has the document layout changed after the source has been inserted? 419 if ( !has_absolute_size(e.target) ) 420 { 421 // then do new check 422 refresh_data( $wrapped_images ); 423 load_visible_images(); 424 } 425 426 427 $images_to_load = $wrapped_images.filter( is_visible ); 428 $images_waiting = $wrapped_images.not($images_to_load); 429 $loading_images = $loading_images.map( function(){ 430 431 if ( this !== e.target ) return this; 432 }); 433 434 if ( $images_to_load.length + $loading_images.length === 0 ) 435 { 436 if ( $images_waiting.length === 0 ) 437 on_all_load(); 438 else 439 on_all_visible_load(); 440 } 441 442 }, 443 444 445 on_all_visible_load = function () 446 { 447 448 $document.trigger('sil_load_visible'); 449 450 if ( $wrapped_images.length === 0 ) 451 on_all_load(); 452 453 else if ( !lazyload ) 454 load_all_images(); 455 456 }, 457 458 459 on_all_load = function () 460 { 461 462 $document.trigger('sil_load_all'); 448 463 449 464 }, … … 453 468 { 454 469 455 if ( initialized === true ) 456 refresh_data( $wrapped_images, true ); 470 if ( initialized === true ){ 471 472 refresh_data( $wrapped_images ); 473 load_visible_images(); 474 } 457 475 458 476 }, … … 585 603 refresh_data( $wrapped_images ); 586 604 587 if ( lazyload ) 588 load_visible_images( null, true ); 605 load_visible_images(); 589 606 590 607 scroll_event_last = scroll_event; … … 627 644 refresh_data( $wrapped_images ); 628 645 629 if ( lazyload ) 630 load_visible_images( null, true ); 646 load_visible_images(); 631 647 632 648 resize_event_last = resize_event; … … 650 666 { 651 667 652 $html_body = $('html, body');653 $noscripts = $('body').find('noscript[data-sil]');654 $wrapped_images = $(sil_options.selector + '[data-sil]');655 window_width = viewport().width;656 window_height = viewport().height;657 host = d.location.protocol + '//' + d.location.host + '/';658 scroll_top = $document.scrollTop();659 scroll_left = $document.scrollLeft();660 doc_height = $document.height();661 inertia = false;662 rubberbanding= false;663 all_loaded = $wrapped_images.length > 0 ? false : true;664 668 $html_body = $('html, body'); 669 $noscripts = $('body').find('noscript[data-sil]'); 670 $wrapped_images = $(sil_options.selector + '[data-sil]'); 671 window_width = viewport().width; 672 window_height = viewport().height; 673 host = d.location.protocol + '//' + d.location.host + '/'; 674 scroll_top = $document.scrollTop(); 675 scroll_left = $document.scrollLeft(); 676 doc_height = $document.height(); 677 $loading_images = $([]); 678 inertia = false; 679 rubberbanding = false; 680 all_loaded = $wrapped_images.length > 0 ? false : true; 665 681 666 682 refresh_data( $wrapped_images ); 667 668 if ( lazyload ) 669 load_visible_images(); 670 else 671 load_visible_images( load_all_images ); 683 load_visible_images( true ); 672 684 673 685 render(); … … 681 693 682 694 683 }) ;695 })(jQuery); 684 696 685 697 -
smart-image-loader/trunk/smart_image_loader.min.js
r1022826 r1030214 1 jQuery(function(O){var ah=window.sil_options||{selector:"img",cleanup:true,responsive_touch:true,emulate_inertia:true,emulate_rubberband:true,meat:100,refresh_resize:true,refresh_scroll:false,enhanced_accuracy:false,lazy_load_at:1024,fade:false,placeholder:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"};2 var a g=document,V=window,H=O(ag),ab,B,A,v,i,F,R,h,N,o,l,k,r,a,j,f,I,n,D,u,aa,J,E,ad,ai,ae,q=/(iPad|iPhone|iPod)/g.test(navigator.userAgent),y=!!(V.matchMedia&&V.matchMedia("(max-device-width: "+ah.lazy_load_at+"px)").matches),W=function(){var w=V,d="inner";3 if(!("innerWidth" in V)){d="client";w=ag.documentElement||ag.body;}return{width:w[d+"Width"],height:w[d+"Height"]};},X=function(d,w){if(window.getComputedStyle){return document.defaultView.getComputedStyle(d,null)[w];4 }if(d.currentStyle){return d.currentStyle[w];}}, K=function(){return J!==aa;},c=function(){return ad!==E;},ac=function(){return ae!==ai;},S=function(at){var ak,au,an,al,ao,w,d,ap,am,av,ar,aq;5 if(a t.nodeType&&at.nodeType==1){ak=at;}else{if(this.nodeType&&this.nodeType==1){ak=this;}}au=O(ak);an=au.data("offsetTop");al=au.data("offsetLeft");ao=au.data("width");6 w=a u.data("height");d=au.data("visibility");ap=an+w>N-ah.meat;ar=al+ao>o-ah.meat;am=an<N+R+ah.meat;av=al<o+F+ah.meat;return ap&&ar&&am&&av&&d;},Y=function(d){var w,ak;7 if(d.nodeType&&d.nodeType==1){w=d;}else{if(this.nodeType&&this.nodeType==1){w=this;}}a k=O(w).attr("src");return ak==ah.placeholder||ak==i;},P=function(d){return typeof d.width=="string"&&d.width.match(/^\d+$/)&&typeof d.height=="string"&&d.height.match(/^\d+$/);8 },e=function(d ,w){d=d||B||O("body").find("noscript").prev(ah.selector);d.each(function(){var al=O(this);al.data({offsetTop:al.offset().top,offsetLeft:al.offset().left,width:al.width(),height:al.height(),visibility:X(this,"display")!="none"&&X(this,"visibility")!="hidden"&&X(this,"opacity")!="0"});9 });h= O(ag).height();if(w){var ak=y?null:x;Q(ak,true);}},G=function(){var d,w,ak;V.scrollBy(0,Math.floor(f/2));f*=0.95;d=h<=R+N+1;w=(N===0);ak=d||w;I=false;10 if(Math.abs(f)>2&&!r&&!ak){I=true;}else{if(ak&&ah.emulate_rubberband){b(f);}}},b=function(ak){n=ak;var al=ak<0?1:-1,w=Math.min(Math.abs(ak),V.innerHeight/10)*al,d=Math.abs(ak*3);11 d=Math.m in(d,200);d=Math.max(d,125);ag.body.style.webkitTransition="all "+d/1000*0.5+"s cubic-bezier(0.3, 0.6, 0.6, 1)";ag.documentElement.style.backgroundColor="lightgrey";12 V.requestAnimationFrame(function(){ag.body.style.webkitTransform="translate3d(0px, "+w+"px, 0px)";});V.setTimeout(function(){ag.body.style.webkitTransition="all "+d/1000*2+"s cubic-bezier(0.5, 0.03, 0.5, 1)";13 V.requestAnimationFrame(function(){ag.body.style.webkitTransform="translate3d(0px, 0px, 0px)";});},d*0.5);V.setTimeout(function(){ag.body.style.webkitTransform="";14 a g.body.style.webkitTransition="";ag.documentElement.style.backgroundColor="";n=false;},d*2.5);},T=function(ak,w,am){ab=O(ak);var d=ab.attr("data-sil"),al=v.filter('[data-sil="'+d+'"]');15 if(typeof w=="function"){ab.on("load",w);}if(ah.fade&&am){ab.data({opacity:ab.css("opacity")}).css({opacity:"0"});ab.on("load",function(){O(this).fadeTo(500,O(this).data("opacity"));16 });}a b.attr("src",al.attr("title"));requestAnimationFrame(function(){if(!P(ak)){e(B,true);}});if(ah.cleanup){al.parent("span").remove();}},Q=function(am,al){var ak=B.filter(S),d=ak.length,w=0;17 if( d===0&&typeof am=="function"){am();}else{ak.each(function(an,ao){T(ao,function(ap){L(ap);w=an+1;if(!P(ap.target)){e(B,true);}if(w==d){H.trigger("sil_load_visible");18 if(typeof am=="function"){am();}}},al);B=B.map(function(){if(this!==ao){return this;}});});}},x=function(){B.each(function(){var d=this;T(d,L);B=B.map(function(){if(this!==d){return this;19 }});});},L=function(d){H.trigger("sil_load");D=B.length>0?false:true;if(D){H.trigger("sil_load_all");}},af=window.sil_refresh=function(){if(u===true){e(B,true);20 }},C=function(d){d.preventDefault();E=d;},z=function(){j=0;f=0;l=false;k=false;r=true;I=false;},aj=function(){l=false;k=false;r=false;if(ah.emulate_inertia){I=true;21 }},U=function(d){aa=d;},t=function(d){ai=d;},s=function(){if(!q){window.requestAnimationFrame(Z);}},p=function(){h=H.height();if(q){V.requestAnimationFrame(Z);22 } },m=function(){O(V).on("resize",t);O(V).on("load",p);H.on("scroll",U);if(ah.responsive_touch&&q){H.on("touchmove",C);H.on("touchend",aj);H.on("touchstart",z);23 }H.ready(s);},g=function(){O(V).off("resize",t);H.off("scroll",U);if(ah.responsive_touch&&q){H.off("touchmove",C);H.off("touchend",aj);H.off("touchstart",z);24 }},M=function(ak){if(K()){N=H.scrollTop();o=H.scrollLeft();if(ah.refresh_scroll){e(B);}if(y){Q(null,true);}J=aa;}if(c()){var w=E.originalEvent.layerX-o;25 var d=E.originalEvent.layerY-N;j=f=0;if(l&&l!==w){j=l-w;}if(k&&k!==d){f=k-d;}l=w;k=d;V.scrollBy(j,f);ad=E;}if(ac()){F=W().width;R=W().height;e(B);if(ah.refresh_resize){e(B);26 } if(y){Q(null,true);}ae=ai;}if(I){G();}if(!D||I||n){V.requestAnimationFrame(M);}else{g();}},Z=function(){A=O("html, body");v=O("body").find("noscript[data-sil]");27 B=O(ah.selector+"[data-sil]");F=W().width;R=W().height;i=ag.location.protocol+"//"+ag.location.host+"/";N=H.scrollTop();o=H.scrollLeft();h=H.height();I=false;28 n=false;D=B.length>0?false:true;e(B);if(y){Q();}else{Q(x);}M();u=true;};rf_poly();m();});function rf_poly(){var b=0;var c=["webkit","moz"];for(var a=0;29 a<c.length&&!window.requestAnimationFrame;++a){window.requestAnimationFrame=window[c[a]+"RequestAnimationFrame"];window.cancelAnimationFrame=window[c[a]+"CancelAnimationFrame"]||window[c[a]+"CancelRequestAnimationFrame"];1 (function(Q){var ak=window.sil_options||{selector:"img",cleanup:true,responsive_touch:true,emulate_inertia:true,emulate_rubberband:true,meat:100,refresh_resize:true,refresh_scroll:false,enhanced_accuracy:false,lazy_load_at:1024,fade:false,placeholder:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"}; 2 var aj=document,Y=window,I=Q(aj),ae,C,N,B,x,i,G,U,h,P,p,l,k,s,a,j,f,J,n,E,v,ad,K,F,ag,al,ah,r=/(iPad|iPhone|iPod)/g.test(navigator.userAgent),z=!!(Y.matchMedia&&Y.matchMedia("(max-device-width: "+ak.lazy_load_at+"px)").matches),aa=function(){var w=Y,d="inner"; 3 if(!("innerWidth" in Y)){d="client";w=aj.documentElement||aj.body;}return{width:w[d+"Width"],height:w[d+"Height"]};},Z=function(d,w){if(window.getComputedStyle){return document.defaultView.getComputedStyle(d,null)[w]; 4 }if(d.currentStyle){return d.currentStyle[w];}},L=function(){return K!==ad;},c=function(){return ag!==F;},af=function(){return ah!==al;},V=function(aw){var an,ax,aq,ao,ar,w,d,at,ap,ay,av,au; 5 if(aw.nodeType&&aw.nodeType==1){an=aw;}else{if(this.nodeType&&this.nodeType==1){an=this;}}ax=Q(an);aq=ax.data("offsetTop");ao=ax.data("offsetLeft");ar=ax.data("width"); 6 w=ax.data("height");d=ax.data("visibility");at=aq+w>P-ak.meat;av=ao+ar>p-ak.meat;ap=aq<P+U+ak.meat;ay=ao<p+G+ak.meat;return at&&av&&ap&&ay&&d;},ab=function(d){var w,an; 7 if(d.nodeType&&d.nodeType==1){w=d;}else{if(this.nodeType&&this.nodeType==1){w=this;}}an=Q(w).attr("src");return an==ak.placeholder||an==i;},S=function(d){return typeof d.width=="string"&&d.width.match(/^\d+$/)&&typeof d.height=="string"&&d.height.match(/^\d+$/); 8 },e=function(d){d=d||C||Q("body").find("noscript").prev(ak.selector);d.each(function(){var w=Q(this);w.data({offsetTop:w.offset().top,offsetLeft:w.offset().left,width:w.width(),height:w.height(),visibility:Z(this,"display")!="none"&&Z(this,"visibility")!="hidden"&&Z(this,"opacity")!="0"}); 9 });h=Q(aj).height();},H=function(){var d,w,an;Y.scrollBy(0,Math.floor(f/2));f*=0.95;d=h<=U+P+1;w=(P===0);an=d||w;J=false;if(Math.abs(f)>2&&!s&&!an){J=true; 10 }else{if(an&&ak.emulate_rubberband){b(f);}}},b=function(an){n=an;var ao=an<0?1:-1,w=Math.min(Math.abs(an),Y.innerHeight/10)*ao,d=Math.abs(an*3);d=Math.min(d,200); 11 d=Math.max(d,125);aj.body.style.webkitTransition="all "+d/1000*0.5+"s cubic-bezier(0.3, 0.6, 0.6, 1)";aj.documentElement.style.backgroundColor="lightgrey"; 12 Y.requestAnimationFrame(function(){aj.body.style.webkitTransform="translate3d(0px, "+w+"px, 0px)";});Y.setTimeout(function(){aj.body.style.webkitTransition="all "+d/1000*2+"s cubic-bezier(0.5, 0.03, 0.5, 1)"; 13 Y.requestAnimationFrame(function(){aj.body.style.webkitTransform="translate3d(0px, 0px, 0px)";});},d*0.5);Y.setTimeout(function(){aj.body.style.webkitTransform=""; 14 aj.body.style.webkitTransition="";aj.documentElement.style.backgroundColor="";n=false;},d*2.5);},W=function(ao,an,d){ae=Q(ao);var w=ae.attr("data-sil"),ap=x.filter('[data-sil="'+w+'"]'); 15 if(typeof an=="function"){ae.on("load",an);}if(ak.fade&&!d){ae.data({opacity:ae.css("opacity")}).css({opacity:"0"});ae.on("load",function(){Q(this).fadeTo(500,Q(this).data("opacity")); 16 });}ae.attr("src",ap.attr("title"));N=N.add(ae);requestAnimationFrame(function(){if(!S(ao)){e(C);T();}});if(ak.cleanup){ap.parent("span").remove();}},T=function(d){var w=C.filter(V); 17 if(w.length>0){w.each(function(an,ao){C=C.map(function(){if(this!==ao){return this;}});W(ao,M,d);});}},y=function(){C.each(function(){var d=this;W(d,M); 18 C=C.map(function(){if(this!==d){return this;}});});},M=function(w){var d,an;I.trigger("sil_load",w.target);if(!S(w.target)){e(C);T();}d=C.filter(V);an=C.not(d); 19 N=N.map(function(){if(this!==w.target){return this;}});if(d.length+N.length===0){if(an.length===0){o();}else{R();}}},R=function(){I.trigger("sil_load_visible"); 20 if(C.length===0){o();}else{if(!z){y();}}},o=function(){I.trigger("sil_load_all");},ai=window.sil_refresh=function(){if(v===true){e(C);T();}},D=function(d){d.preventDefault(); 21 F=d;},A=function(){j=0;f=0;l=false;k=false;s=true;J=false;},am=function(){l=false;k=false;s=false;if(ak.emulate_inertia){J=true;}},X=function(d){ad=d;},u=function(d){al=d; 22 },t=function(){if(!r){window.requestAnimationFrame(ac);}},q=function(){h=I.height();if(r){Y.requestAnimationFrame(ac);}},m=function(){Q(Y).on("resize",u); 23 Q(Y).on("load",q);I.on("scroll",X);if(ak.responsive_touch&&r){I.on("touchmove",D);I.on("touchend",am);I.on("touchstart",A);}I.ready(t);},g=function(){Q(Y).off("resize",u); 24 I.off("scroll",X);if(ak.responsive_touch&&r){I.off("touchmove",D);I.off("touchend",am);I.off("touchstart",A);}},O=function(an){if(L()){P=I.scrollTop(); 25 p=I.scrollLeft();if(ak.refresh_scroll){e(C);}T();K=ad;}if(c()){var w=F.originalEvent.layerX-p;var d=F.originalEvent.layerY-P;j=f=0;if(l&&l!==w){j=l-w;}if(k&&k!==d){f=k-d; 26 }l=w;k=d;Y.scrollBy(j,f);ag=F;}if(af()){G=aa().width;U=aa().height;e(C);if(ak.refresh_resize){e(C);}T();ah=al;}if(J){H();}if(!E||J||n){Y.requestAnimationFrame(O); 27 }else{g();}},ac=function(){B=Q("html, body");x=Q("body").find("noscript[data-sil]");C=Q(ak.selector+"[data-sil]");G=aa().width;U=aa().height;i=aj.location.protocol+"//"+aj.location.host+"/"; 28 P=I.scrollTop();p=I.scrollLeft();h=I.height();N=Q([]);J=false;n=false;E=C.length>0?false:true;e(C);T(true);O();v=true;};rf_poly();m();})(jQuery);function rf_poly(){var b=0; 29 var c=["webkit","moz"];for(var a=0;a<c.length&&!window.requestAnimationFrame;++a){window.requestAnimationFrame=window[c[a]+"RequestAnimationFrame"];window.cancelAnimationFrame=window[c[a]+"CancelAnimationFrame"]||window[c[a]+"CancelRequestAnimationFrame"]; 30 30 }if(!window.requestAnimationFrame){window.requestAnimationFrame=function(h,e){var d=new Date().getTime();var f=Math.max(0,16-(d-b));var g=window.setTimeout(function(){h(d+f); 31 31 },f);b=d+f;return g;};}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(d){clearTimeout(d);};}}
Note: See TracChangeset
for help on using the changeset viewer.