WordPress.org
Get WordPress

Plugin Directory

Changeset 1922099


Ignore:
Timestamp:
08/09/2018 09:59:16 AM (8 years ago)
Author:
bypr.nils
Message:

added force_visible feature

Location:
smart-image-loader
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • smart-image-loader

    • Property svn:ignore

      •  

        old new  
         1.svnignore
        12.git
        23.gitignore
        3 *.sublime-workspace
        44readme-svn.txt
         5smart-image-loader.sublime-project
         6smart-image-loader.sublime-workspace

  • smart-image-loader/trunk/plugin.php

    r1813516 r1922099  
    44Plugin URI: https://wordpress.org/plugins/smart-image-loader
    55Description: 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.5.0
     6Version: 0.5.1
    77Text Domain: smart-image-loader
    88Author: Bayer und Preuss

  • smart-image-loader/trunk/readme.txt

    r1813516 r1922099  
    44Requires at least: 3.8.3
    55Tested up to: 4.9.3
    6 Stable tag: 0.5.0
     6Stable tag: 0.5.1
    77License: GPLv2 or later
    88License URI: http://www.gnu.org/licenses/gpl-2.0.html
    … …  
    3131
    3232== Changelog ==
     33
     34= 0.5.1 =
     35* forcing priority loaded images to be visible by css their properties
    3336
    3437= 0.5.0 =

  • smart-image-loader/trunk/smart_image_loader.js

    r1813516 r1922099  
    11(function($) {
    22
    3     // Version: 0.5.0
     3    // Version: 0.5.1
    44
    55    "use strict";
    … …  
    3030
    3131        // Value of empty image source.
    32         placeholder: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
     32        placeholder: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
     33
     34        // when priority loading, never load images that are not visible due to css rules. This rule is not available in the plugin options front end because I think it is too advanced to be relevant.
     35        force_visible: true
    3336    };
    3437
    … …  
    111114    },
    112115
    113 
    114     is_visible = function(v)
     116    is_visible_in_viewport = function(v)
    115117    {
    116118
    … …  
    152154
    153155
     156    is_visible = function (v)
     157    {
     158        var element;
     159
     160        if ( v.nodeType && v.nodeType == 1 )
     161            element = v;
     162
     163        else if ( this.nodeType && this.nodeType == 1 )
     164            element = this;
     165
     166        return $(element).data('visibility');
     167    },
     168
     169
     170    no_filter = function ()
     171    {
     172        return true;
     173    },
     174
     175
    154176    source_not_set = function(v)
    155177    {
    … …  
    275297    },
    276298
    277 
    278     load_visible_images = function( override_fading )
    279     {
    280 
    281         var $images_to_load = $wrapped_images.filter( is_visible );
     299    load_images = function ( filter, override_fading ) {
     300
     301        var $images_to_load = $wrapped_images.filter( filter || no_filter );
    282302
    283303        if ( $images_to_load.length > 0 )
    … …  
    293313                // trigger image loading
    294314                load_image( image, on_image_load, override_fading );
    295 
    296315            });
    297316        }
    298 
    299     },
    300 
    301 
     317    },
     318
     319    // load all images regarding their position on the viewport
     320    load_visible_images = function( filter, override_fading )
     321    {
     322        load_images( is_visible_in_viewport, override_fading );
     323    },
     324
     325    // load all images, no matter their position on the viewport
    302326    load_all_images = function()
    303327    {
    304 
    305         $wrapped_images.each( function(){
    306 
    307             var image = this;
    308 
    309             // trigger image loading
    310             load_image( image, on_image_load );
    311 
    312             // remove load triggered image from object
    313             $wrapped_images = $wrapped_images.map( function(){
    314 
    315                 if ( this !== image  ) return this;
    316             });
    317         });
    318 
    319     },
    320 
    321 
    322 
    323 
    324 
     328        var filter = sil_options.force_visible ? is_visible : no_filter;
     329
     330        load_images( filter );
     331    },
    325332
    326333    // EVENT HANDLING
    … …  
    346353        e.target.removeAttribute("data-sil");
    347354
    348         $images_to_load = $wrapped_images.filter( is_visible );
     355        $images_to_load = $wrapped_images.filter( is_visible_in_viewport );
    349356        $images_waiting = $wrapped_images.not($images_to_load);
    350357        $loading_images = $loading_images.map( function(){

  • smart-image-loader/trunk/smart_image_loader.min.js

    r1813516 r1922099  
    1 (function(D){var W=window.sil_options||{selector:"img",cleanup:true,meat:100,refresh_resize:true,refresh_scroll:false,lazy_load_at:1024,fade:false,placeholder:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"};
    2 var V=document,L=window,v=D(V),R,s,A,r,o,e,u,H,c,C,j,g,f,t,n,Q,x,X,T,q=!!(L.matchMedia&&L.matchMedia("(max-device-width: "+W.lazy_load_at+"px)").matches),M=function(){var w=L,d="inner";
    3 if(!("innerWidth" in L)){d="client";w=V.documentElement||V.body;}return{width:w[d+"Width"],height:w[d+"Height"]};},N=function(d,w){if(window.getComputedStyle){return document.defaultView.getComputedStyle(d,null)[w];
    4 }if(d.currentStyle){return d.currentStyle[w];}},y=function(){return x!==Q;},S=function(){return T!==X;},I=function(ah){var Z,ai,Y,ac,aa,ad,w,d,ae,ab,ak,ag,af,aj;
    5 if(ah.nodeType&&ah.nodeType==1){Z=ah;}else{if(this.nodeType&&this.nodeType==1){Z=this;}}ai=D(Z);Y=ai.data();aj=W;d=Y.visibility;ae=Y.offsetTop+Y.height>C-aj.meat;
    6 ag=Y.offsetLeft+Y.width>j-aj.meat;ab=Y.offsetTop<C+H+aj.meat;ak=Y.offsetLeft<j+u+aj.meat;return ae&&ag&&ab&&ak&&d;},O=function(d){var w,Y;if(d.nodeType&&d.nodeType==1){w=d;
    7 }else{if(this.nodeType&&this.nodeType==1){w=this;}}Y=D(w).attr("src");return Y==W.placeholder||Y==e;},F=function(d){return typeof d.width=="string"&&d.width.match(/^\d+$/)&&typeof d.height=="string"&&d.height.match(/^\d+$/);
    8 },a=function(d){d=d||s||D("body").find("noscript").prev(W.selector);d.each(function(){var w=D(this);w.data({offsetTop:w.offset().top,offsetLeft:w.offset().left,width:w.width(),height:w.height(),visibility:N(this,"display")!="none"&&N(this,"visibility")!="hidden"&&N(this,"opacity")!="0"&&w.is(":visible")});
    9 });c=D(V).height();},J=function(ab,aa,d){R=D(ab);var Z=R.attr("data-sil"),ac=o.filter('[data-sil="'+Z+'"]'),Y,w,ad;if(typeof aa=="function"){R.on("load",aa);
    10 }if(W.fade&&!d){R.data({opacity:R.css("opacity")}).css({opacity:"0"});R.on("load",function(){D(this).fadeTo(500,D(this).data("opacity"));});}Y="(max-width: "+u+"px) "+parseInt(R.data("width")/u*100)+"vw";
    11 if(R.attr("sizes")){Y+=(", "+R.attr("sizes"));}R.attr("sizes",Y);w=ac.attr("data-srcset");if(w){R.attr("srcset",w);}ad=ac.attr("data-src");if(ad){R.attr("src",ac.attr("data-src"));
    12 }A=A.add(R);requestAnimationFrame(function(){if(!F(ab)){a(s);G();}});if(W.cleanup){ac.parent("span").remove();}},G=function(d){var w=s.filter(I);if(w.length>0){w.each(function(Y,Z){s=s.map(function(){if(this!==Z){return this;
    13 }});J(Z,z,d);});}},p=function(){s.each(function(){var d=this;J(d,z);s=s.map(function(){if(this!==d){return this;}});});},z=function(w){var d,Y;v.trigger("sil_load",w.target);
    14 if(!F(w.target)){a(s);G();}w.target.removeAttribute("data-sil");d=s.filter(I);Y=s.not(d);A=A.map(function(){if(this!==w.target){return this;}});if(d.length+A.length===0){if(Y.length===0){i();
    15 }else{E();}}},E=function(){v.trigger("sil_load_visible");if(s.length===0){i();}else{if(!q){p();}}},i=function(){v.trigger("sil_load_all");},U=window.sil_refresh=function(){if(n===true){a(s);
    16 G();}},K=function(d){Q=d;},m=function(d){X=d;},l=function(){window.requestAnimationFrame(P);},k=function(){c=v.height();},h=function(){D(L).on("resize",m);
    17 D(L).on("load",k);v.on("scroll",K);v.ready(l);},b=function(){D(L).off("resize",m);v.off("scroll",K);},B=function(d){if(y()){C=v.scrollTop();j=v.scrollLeft();
    18 if(W.refresh_scroll){a(s);}G();x=Q;}if(S()){u=M().width;H=M().height;a(s);if(W.refresh_resize){a(s);}G();T=X;}if(!t){L.requestAnimationFrame(B);}else{b();
    19 }},P=function(){r=D("html, body");o=D("body").find("noscript[data-sil]");s=D(W.selector+"[data-sil]");u=M().width;H=M().height;e=V.location.protocol+"//"+V.location.host+"/";
    20 C=v.scrollTop();j=v.scrollLeft();c=v.height();A=D([]);t=s.length>0?false:true;a(s);G(true);B();n=true;};rf_poly();h();})(jQuery);function rf_poly(){var b=0;
    21 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"];
    22 }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);
    23 },f);b=d+f;return g;};}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(d){clearTimeout(d);};}}
     1function rf_poly(){for(var lastTime=0,vendors=["webkit","moz"],x=0;x<vendors.length&&!window.requestAnimationFrame;++x)window.requestAnimationFrame=window[vendors[x]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[vendors[x]+"CancelAnimationFrame"]||window[vendors[x]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(callback,element){var currTime=(new Date).getTime(),timeToCall=Math.max(0,16-(currTime-lastTime)),id=window.setTimeout(function(){callback(currTime+timeToCall)},timeToCall);return lastTime=currTime+timeToCall,id}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(id){clearTimeout(id)})}!function($){"use strict";var $wrapping_image,$wrapped_images,$loading_images,$html_body,$noscripts,host,window_width,window_height,doc_height,scroll_top,scroll_left,all_loaded,initialized,scroll_event,scroll_event_last,resize_event,resize_event_last,sil_options=window.sil_options||{selector:"img",cleanup:!0,meat:100,refresh_resize:!0,refresh_scroll:!1,lazy_load_at:1024,fade:!1,placeholder:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",force_visible:!0},d=document,w=window,$document=$(d),lazyload=!(!w.matchMedia||!w.matchMedia("(max-device-width: "+sil_options.lazy_load_at+"px)").matches),viewport=function(){var e=w,a="inner";return"innerWidth"in w||(a="client",e=d.documentElement||d.body),{width:e[a+"Width"],height:e[a+"Height"]}},getStyle=function(el,property){return window.getComputedStyle?document.defaultView.getComputedStyle(el,null)[property]:el.currentStyle?el.currentStyle[property]:void 0},scrolled=function(){return scroll_event_last!==scroll_event},resized=function(){return resize_event_last!==resize_event},is_visible_in_viewport=function(v){var element,$element,data,element_visibile,is_not_above_screen,is_not_below_screen,is_not_right_of_screen,is_not_left_of_screen,options;return v.nodeType&&1==v.nodeType?element=v:this.nodeType&&1==this.nodeType&&(element=this),$element=$(element),data=$element.data(),options=sil_options,element_visibile=data.visibility,is_not_above_screen=data.offsetTop+data.height>scroll_top-options.meat,is_not_left_of_screen=data.offsetLeft+data.width>scroll_left-options.meat,is_not_below_screen=data.offsetTop<scroll_top+window_height+options.meat,is_not_right_of_screen=data.offsetLeft<scroll_left+window_width+options.meat,is_not_above_screen&&is_not_left_of_screen&&is_not_below_screen&&is_not_right_of_screen&&element_visibile},is_visible=function(v){var element;return v.nodeType&&1==v.nodeType?element=v:this.nodeType&&1==this.nodeType&&(element=this),$(element).data("visibility")},no_filter=function(){return!0},has_absolute_size=function(img){return"string"==typeof img.width&&img.width.match(/^\d+$/)&&"string"==typeof img.height&&img.height.match(/^\d+$/)},refresh_data=function($elements){($elements=$elements||$wrapped_images||$("body").find("noscript").prev(sil_options.selector)).each(function(){var $this=$(this);$this.data({offsetTop:$this.offset().top,offsetLeft:$this.offset().left,width:$this.width(),height:$this.height(),visibility:"none"!=getStyle(this,"display")&&"hidden"!=getStyle(this,"visibility")&&"0"!=getStyle(this,"opacity")&&$this.is(":visible")})}),doc_height=$(d).height()},load_image=function(wrapping_image,on_load_callback,override_fading){var sizes,srcSet,classId=($wrapping_image=$(wrapping_image)).attr("data-sil"),$noscript=$noscripts.filter('[data-sil="'+classId+'"]');"function"==typeof on_load_callback&&$wrapping_image.on("load",on_load_callback),sil_options.fade&&!override_fading&&($wrapping_image.data({opacity:$wrapping_image.css("opacity")}).css({opacity:"0"}),$wrapping_image.on("load",function(){$(this).fadeTo(500,$(this).data("opacity"))})),sizes="(max-width: "+window_width+"px) "+parseInt($wrapping_image.data("width")/window_width*100)+"vw",$wrapping_image.attr("sizes")&&(sizes+=", "+$wrapping_image.attr("sizes")),$wrapping_image.attr("sizes",sizes),(srcSet=$noscript.attr("data-srcset"))&&$wrapping_image.attr("srcset",srcSet),$noscript.attr("data-src")&&$wrapping_image.attr("src",$noscript.attr("data-src")),$loading_images=$loading_images.add($wrapping_image),requestAnimationFrame(function(){has_absolute_size(wrapping_image)||(refresh_data($wrapped_images),load_visible_images())}),sil_options.cleanup&&$noscript.parent("span").remove()},load_images=function(filter,override_fading){var $images_to_load=$wrapped_images.filter(filter||no_filter);$images_to_load.length>0&&$images_to_load.each(function(i,image){$wrapped_images=$wrapped_images.map(function(){if(this!==image)return this}),load_image(image,on_image_load,override_fading)})},load_visible_images=function(filter,override_fading){load_images(is_visible_in_viewport,override_fading)},load_all_images=function(){load_images(sil_options.force_visible?is_visible:no_filter)},on_image_load=function(e){var $images_to_load,$images_waiting;$document.trigger("sil_load",e.target),has_absolute_size(e.target)||(refresh_data($wrapped_images),load_visible_images()),e.target.removeAttribute("data-sil"),$images_to_load=$wrapped_images.filter(is_visible_in_viewport),$images_waiting=$wrapped_images.not($images_to_load),$loading_images=$loading_images.map(function(){if(this!==e.target)return this}),$images_to_load.length+$loading_images.length===0&&(0===$images_waiting.length?on_all_load():on_all_visible_load())},on_all_visible_load=function(){$document.trigger("sil_load_visible"),0===$wrapped_images.length?on_all_load():lazyload||load_all_images()},on_all_load=function(){$document.trigger("sil_load_all")},on_document_scroll=(window.sil_refresh=function(){!0===initialized&&(refresh_data($wrapped_images),load_visible_images())},function(e){scroll_event=e}),on_window_resize=function(e){resize_event=e},on_document_ready=function(){window.requestAnimationFrame(init)},on_window_load=function(){doc_height=$document.height()},unregister_events=function(){$(w).off("resize",on_window_resize),$document.off("scroll",on_document_scroll)},render=function(frame){scrolled()&&(scroll_top=$document.scrollTop(),scroll_left=$document.scrollLeft(),sil_options.refresh_scroll&&refresh_data($wrapped_images),load_visible_images(),scroll_event_last=scroll_event),resized()&&(window_width=viewport().width,window_height=viewport().height,refresh_data($wrapped_images),sil_options.refresh_resize&&refresh_data($wrapped_images),load_visible_images(),resize_event_last=resize_event),all_loaded?unregister_events():w.requestAnimationFrame(render)},init=function(){$html_body=$("html, body"),$noscripts=$("body").find("noscript[data-sil]"),$wrapped_images=$(sil_options.selector+"[data-sil]"),window_width=viewport().width,window_height=viewport().height,host=d.location.protocol+"//"+d.location.host+"/",scroll_top=$document.scrollTop(),scroll_left=$document.scrollLeft(),doc_height=$document.height(),$loading_images=$([]),all_loaded=!($wrapped_images.length>0),refresh_data($wrapped_images),load_visible_images(!0),render(),initialized=!0};rf_poly(),function(){$(w).on("resize",on_window_resize),$(w).on("load",on_window_load),$document.on("scroll",on_document_scroll),$document.ready(on_document_ready)}()}(jQuery);
Note: See TracChangeset for help on using the changeset viewer.