懒加载图片代码
parent
636c3c5a8f
commit
7f6a76df65
@ -0,0 +1,13 @@
|
||||
window.isSupportWebp=false;(function(){var img=new Image();function getResult(event){window.isSupportWebp=event&&event.type==='load'?img.width==1:false;createImageLoader()}img.onerror=getResult;img.onload=getResult;img.src='data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA='})();if(!Array.from){Array.from=(function(){var toStr=Object.prototype.toString;var isCallable=function(fn){return typeof fn==="function"||toStr.call(fn)==="[object Function]"};var toInteger=function(value){var number=Number(value);if(isNaN(number)){return 0}if(number===0||!isFinite(number)){return number}return(number>0?1:-1)*Math.floor(Math.abs(number))};var maxSafeInteger=Math.pow(2,53)-1;var toLength=function(value){var len=toInteger(value);return Math.min(Math.max(len,0),maxSafeInteger)};return function from(arrayLike){var C=this;var items=Object(arrayLike);if(arrayLike==null){throw new TypeError("Array.from requires an array-like object - not null or undefined")}var mapFn=arguments.length>1?arguments[1]:void undefined;var T;if(typeof mapFn!=="undefined"){if(!isCallable(mapFn)){throw new TypeError("Array.from: when provided, the second argument must be a function")}if(arguments.length>2){T=arguments[2]}}var len=toLength(items.length);var A=isCallable(C)?Object(new C(len)):new Array(len);var k=0;var kValue;while(k<len){kValue=items[k];if(mapFn){A[k]=typeof T==="undefined"?mapFn(kValue,k):mapFn.call(T,kValue,k)}else{A[k]=kValue}k+=1}A.length=len;return A}}())}if(!Array.prototype.forEach){Array.prototype.forEach=function(callback){var T,k;if(this==null){throw new TypeError("this is null or not defined")}var O=Object(this);var len=O.length>>>0;if(typeof callback!=="function"){throw new TypeError(callback+" is not a function")}if(arguments.length>1){T=arguments[1]}k=0;while(k<len){var kValue;if(k in O){kValue=O[k];callback.call(T,kValue,k,O)}k++}}}function createImageLoader(settings){var loadImageByUrl=function(target){target.addEventListener("load",function(){target.style.opacity=1});if(window.isSupportWebp){target.setAttribute("src",target.getAttribute("originalsrc").replace('.jpg','.webp'))}else{target.setAttribute("src",target.getAttribute("originalsrc"))}};var imageList=Array.from(document.querySelectorAll("img[loader=ready]"));imageList.forEach(function(element,index){element.style.opacity=0;element.style.transition="opacity 0.5s ease-in-out";loadImageByUrl(element)});var lazyloader=createLazyloader();lazyloader();function throttle(fn,delay,atleast){var timeout=null,startTime=new Date();return function(){var curTime=new Date();clearTimeout(timeout);if(curTime-startTime>=atleast){fn();startTime=curTime}else{timeout=setTimeout(fn,delay)}}}function getOffset(el){var box=el.getBoundingClientRect();return{top:box.top+window.pageYOffset-document.documentElement.clientTop,left:box.left+window.pageXOffset-document.documentElement.clientLeft}}function createLazyloader(){var lazyImageList=Array.from(document.querySelectorAll("img[loader=lazy]"));lazyImageList.forEach(function(element,index){element.style.opacity=0;element.style.transition="opacity 0.5s ease-in-out"});return function(){var seeHeight=window.innerHeight;var scrollTop=(document.documentElement&&document.documentElement.scrollTop)||(document.body&&document.body.scrollTop);lazyImageList=lazyImageList.filter(function(element,index){var offsetTop=getOffset(element).top;var hasVisible=offsetTop<seeHeight+scrollTop;if(hasVisible){loadImageByUrl(element)}return!hasVisible})}}if(window.addEventListener){window.addEventListener("scroll",throttle(lazyloader,500,500),false)}else{if(window.attachEvent){window.attachEvent("onscroll",throttle(lazyloader,500,500))}}};
|
||||
|
||||
|
||||
|
||||
使用方法
|
||||
<img class="img-responsive" src="https://data.asiahighlights.com/image/grey.gif" originalsrc="https://data.asiahighlights.com/pic/featured-in-icons.png" loader="lazy">
|
||||
|
||||
|
||||
|
||||
加密后
|
||||
|
||||
<script>eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('8.R=10;(4(){3 h=b 26();4 11(X){8.R=X&&X.1I===\'1b\'?h.1V==1:10;1c()}h.1T=11;h.1Z=11;h.S=\'1M:1R/1x;1F,1Q/1P=\'})();5(!c.g){c.g=(4(){3 1u=y.M.1S;3 P=4(l){6 I l==="4"||1u.Q(l)==="[19 1L]"};3 1j=4(D){3 f=1O(D);5(1N(f)){6 0}5(f===0||!1Y(f)){6 f}6(f>0?1:-1)*o.1X(o.20(f))};3 1y=o.1U(2,1W)-1;3 1a=4(D){3 9=1j(D);6 o.1G(o.1H(9,0),1y)};6 4 g(J){3 C=E;3 U=y(J);5(J==p){F b H("c.g 1K 1J 1E-1D 19 - V p 1k B")}3 n=j.m>1?j[1]:2o B;3 T;5(I n!=="B"){5(!P(n)){F b H("c.g: 2q 2j, 2i 2k 2l 2m 2n a 4")}5(j.m>2){T=j[2]}}3 9=1a(U.m);3 A=P(C)?y(b C(9)):b c(9);3 k=0;3 d;1l(k<9){d=U[k];5(n){A[k]=I T==="B"?n(d,k):n.Q(T,d,k)}z{A[k]=d}k+=1}A.m=9;6 A}}())}5(!c.M.v){c.M.v=4(u){3 T,k;5(E==p){F b H("E 1i p 1k V 2p")}3 O=y(E);3 9=O.m>>>0;5(I u!=="4"){F b H(u+" 1i V a 4")}5(j.m>1){T=j[1]}k=0;1l(k<9){3 d;5(k 13 O){d=O[k];u.Q(T,d,k,O)}k++}}}4 1c(2h){3 14=4(i){i.W("1b",4(){i.r.q=1});5(8.R){i.1z("S",i.1B("1A").25(\'.28\',\'.1x\'))}z{i.1z("S",i.1B("1A"))}};3 1p=c.g(e.1q("h[1C=27]"));1p.v(4(7,Y){7.r.q=0;7.r.1w="q 0.18 1e-13-1m";14(7)});3 w=1o();w();4 12(l,1s,1v){3 N=p,L=b 1r();6 4(){3 K=b 1r();22(N);5(K-L>=1v){l();L=K}z{N=21(l,1s)}}}4 1h(1n){3 16=1n.24();6{15:16.15+8.23-e.t.2e,1t:16.1t+8.2d-e.t.2g}}4 1o(){3 G=c.g(e.1q("h[1C=2f]"));G.v(4(7,Y){7.r.q=0;7.r.1w="q 0.18 1e-13-1m"});6 4(){3 1g=8.2a;3 x=(e.t&&e.t.x)||(e.1d&&e.1d.x);G=G.29(4(7,Y){3 1f=1h(7).15;3 Z=1f<1g+x;5(Z){14(7)}6!Z})}}5(8.W){8.W("2c",12(w,s,s),10)}z{5(8.17){8.17("2b",12(w,s,s))}}};',62,151,'|||var|function|if|return|element|window|len||new|Array|kValue|document|number|from|img|target|arguments||fn|length|mapFn|Math|null|opacity|style|500|documentElement|callback|forEach|lazyloader|scrollTop|Object|else||undefined||value|this|throw|lazyImageList|TypeError|typeof|arrayLike|curTime|startTime|prototype|timeout||isCallable|call|isSupportWebp|src||items|not|addEventListener|event|index|hasVisible|false|getResult|throttle|in|loadImageByUrl|top|box|attachEvent|5s|object|toLength|load|createImageLoader|body|ease|offsetTop|seeHeight|getOffset|is|toInteger|or|while|out|el|createLazyloader|imageList|querySelectorAll|Date|delay|left|toStr|atleast|transition|webp|maxSafeInteger|setAttribute|originalsrc|getAttribute|loader|like|array|base64|min|max|type|an|requires|Function|data|isNaN|Number|vuUAAA|UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA|image|toString|onerror|pow|width|53|floor|isFinite|onload|abs|setTimeout|clearTimeout|pageYOffset|getBoundingClientRect|replace|Image|ready|jpg|filter|innerHeight|onscroll|scroll|pageXOffset|clientTop|lazy|clientLeft|settings|the|provided|second|argument|must|be|void|defined|when'.split('|'),0,{}))
|
||||
</script>
|
Loading…
Reference in New Issue