mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
2 lines
15 KiB
JavaScript
2 lines
15 KiB
JavaScript
/*! For license information please see 1867.45810222.js.LICENSE.txt */
|
|
(self.webpackChunk=self.webpackChunk||[]).push([["1867"],{86546:function(t,e,i){"use strict";i.r(e);var s=i("89492");i("93737");let r=s.Z;e.default=r},99162:function(t,e,i){"use strict";i.d(e,{J:function(){return a}});var s=i("76142"),r=i("90132"),n=i("75710"),o=i("38801");let a={install(t,e={}){let i=new((0,s.Z)())(e),a=new n.Z({lazy:i});t.config.globalProperties.$Lazyload=i,e.lazyComponent&&t.component("LazyComponent",(0,r.Z)(i)),e.lazyImage&&t.component("LazyImage",(0,o.Z)(i)),t.directive("lazy",{beforeMount:i.add.bind(i),updated:i.update.bind(i),unmounted:i.remove.bind(i)}),t.directive("lazy-container",{beforeMount:a.bind.bind(a),updated:a.update.bind(a),unmounted:a.unbind.bind(a)})}}},90132:function(t,e,i){"use strict";var s=i("80681"),r=i("22300");e.Z=t=>({props:{tag:{type:String,default:"div"}},emits:["show"],render(){return(0,s.h)(this.tag,this.show&&this.$slots.default?this.$slots.default():null)},data:()=>({el:null,state:{loaded:!1},show:!1}),mounted(){this.el=this.$el,t.addLazyBox(this),t.lazyLoadHandler()},beforeUnmount(){t.removeComponent(this)},methods:{checkInView(){let e=(0,r.EL)(this.$el);return r._f&&e.top<window.innerHeight*t.options.preLoad&&e.bottom>0&&e.left<window.innerWidth*t.options.preLoad&&e.right>0},load(){this.show=!0,this.state.loaded=!0,this.$emit("show",this)},destroy(){return this.$destroy}}})},75710:function(t,e,i){"use strict";i.d(e,{Z:function(){return o}});var s=i("83882");let r={selector:"img"};class n{constructor({el:t,binding:e,vnode:i,lazy:s}){this.el=null,this.vnode=i,this.binding=e,this.options={},this.lazy=s,this.queue=[],this.update({el:t,binding:e})}update({el:t,binding:e}){this.el=t,this.options=Object.assign({},r,e.value),this.getImgs().forEach(t=>{this.lazy.add(t,Object.assign({},this.binding,{value:{src:"dataset"in t?t.dataset.src:t.getAttribute("data-src"),error:("dataset"in t?t.dataset.error:t.getAttribute("data-error"))||this.options.error,loading:("dataset"in t?t.dataset.loading:t.getAttribute("data-loading"))||this.options.loading}}),this.vnode)})}getImgs(){return Array.from(this.el.querySelectorAll(this.options.selector))}clear(){this.getImgs().forEach(t=>this.lazy.remove(t)),this.vnode=null,this.binding=null,this.lazy=null}}class o{constructor({lazy:t}){this.lazy=t,this.queue=[]}bind(t,e,i){let s=new n({el:t,binding:e,vnode:i,lazy:this.lazy});this.queue.push(s)}update(t,e,i){let s=this.queue.find(e=>e.el===t);s&&s.update({el:t,binding:e,vnode:i})}unbind(t){let e=this.queue.find(e=>e.el===t);e&&(e.clear(),(0,s.Od)(this.queue,e))}}},38801:function(t,e,i){"use strict";var s=i("22300"),r=i("83882"),n=i("12308"),o=i("80681");e.Z=t=>({props:{src:[String,Object],tag:{type:String,default:"img"}},render(){return(0,o.h)(this.tag,{src:this.renderSrc},this.$slots.default?.())},data:()=>({el:null,options:{src:"",error:"",loading:"",attempt:t.options.attempt},state:{loaded:!1,error:!1,attempt:0},renderSrc:""}),watch:{src(){this.init(),t.addLazyBox(this),t.lazyLoadHandler()}},created(){this.init()},mounted(){this.el=this.$el,t.addLazyBox(this),t.lazyLoadHandler()},beforeUnmount(){t.removeComponent(this)},methods:{init(){let{src:e,loading:i,error:s}=t.valueFormatter(this.src);this.state.loaded=!1,this.options.src=e,this.options.error=s,this.options.loading=i,this.renderSrc=this.options.loading},checkInView(){let e=(0,s.EL)(this.$el);return e.top<window.innerHeight*t.options.preLoad&&e.bottom>0&&e.left<window.innerWidth*t.options.preLoad&&e.right>0},load(t=n.ZT){if(this.state.attempt>this.options.attempt-1&&this.state.error){t();return}let{src:e}=this.options;(0,r.fY)({src:e},({src:t})=>{this.renderSrc=t,this.state.loaded=!0},()=>{this.state.attempt++,this.renderSrc=this.options.error,this.state.error=!0})}}})},76142:function(t,e,i){"use strict";i.d(e,{Z:function(){return u}});var s=i("80681"),r=i("22300"),n=i("83882"),o=i("12308"),a=i("37248");let l="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",h=["scroll","wheel","mousewheel","resize","animationend","transitionend","touchmove"],d={rootMargin:"0px",threshold:0};function u(){return class{constructor({preLoad:t,error:e,throttleWait:i,preLoadTop:s,dispatchEvent:r,loading:o,attempt:a,silent:u=!0,scale:c,listenEvents:p,filter:f,adapter:g,observer:m,observerOptions:v}){this.mode=n.lM.event,this.listeners=[],this.targetIndex=0,this.targets=[],this.options={silent:u,dispatchEvent:!!r,throttleWait:i||200,preLoad:t||1.3,preLoadTop:s||0,error:e||l,loading:o||l,attempt:a||3,scale:c||(0,n.Ky)(c),ListenEvents:p||h,supportWebp:(0,n.q6)(),filter:f||{},adapter:g||{},observer:!!m,observerOptions:v||d},this.initEvent(),this.imageCache=new n.ym({max:200}),this.lazyLoadHandler=(0,n.P2)(this.lazyLoadHandler.bind(this),this.options.throttleWait),this.setMode(this.options.observer?n.lM.observer:n.lM.event)}config(t={}){Object.assign(this.options,t)}performance(){return this.listeners.map(t=>t.performance())}addLazyBox(t){this.listeners.push(t),r._f&&(this.addListenerTarget(window),this.observer&&this.observer.observe(t.el),t.$el&&t.$el.parentNode&&this.addListenerTarget(t.$el.parentNode))}add(t,e,i){if(this.listeners.some(e=>e.el===t))return this.update(t,e),(0,s.Y3)(this.lazyLoadHandler);let o=this.valueFormatter(e.value),{src:l}=o;(0,s.Y3)(()=>{let h;l=(0,n.bH)(t,this.options.scale)||l,this.observer&&this.observer.observe(t);let d=Object.keys(e.modifiers)[0];d&&(h=(h=i.context.$refs[d])?h.$el||h:document.getElementById(d)),!h&&(h=(0,r.rP)(t));let u=new a.Z({bindType:e.arg,$parent:h,el:t,src:l,loading:o.loading,error:o.error,cors:o.cors,elRenderer:this.elRenderer.bind(this),options:this.options,imageCache:this.imageCache});this.listeners.push(u),r._f&&(this.addListenerTarget(window),this.addListenerTarget(h)),this.lazyLoadHandler(),(0,s.Y3)(()=>this.lazyLoadHandler())})}update(t,e,i){let r=this.valueFormatter(e.value),{src:o}=r;o=(0,n.bH)(t,this.options.scale)||o;let a=this.listeners.find(e=>e.el===t);a?a.update({src:o,error:r.error,loading:r.loading}):this.add(t,e,i),this.observer&&(this.observer.unobserve(t),this.observer.observe(t)),this.lazyLoadHandler(),(0,s.Y3)(()=>this.lazyLoadHandler())}remove(t){if(!t)return;this.observer&&this.observer.unobserve(t);let e=this.listeners.find(e=>e.el===t);e&&(this.removeListenerTarget(e.$parent),this.removeListenerTarget(window),(0,n.Od)(this.listeners,e),e.$destroy())}removeComponent(t){t&&((0,n.Od)(this.listeners,t),this.observer&&this.observer.unobserve(t.el),t.$parent&&t.$el.parentNode&&this.removeListenerTarget(t.$el.parentNode),this.removeListenerTarget(window))}setMode(t){!n.Bm&&t===n.lM.observer&&(t=n.lM.event),this.mode=t,t===n.lM.event?(this.observer&&(this.listeners.forEach(t=>{this.observer.unobserve(t.el)}),this.observer=null),this.targets.forEach(t=>{this.initListen(t.el,!0)})):(this.targets.forEach(t=>{this.initListen(t.el,!1)}),this.initIntersectionObserver())}addListenerTarget(t){if(!t)return;let e=this.targets.find(e=>e.el===t);return e?e.childrenCount++:(e={el:t,id:++this.targetIndex,childrenCount:1,listened:!0},this.mode===n.lM.event&&this.initListen(e.el,!0),this.targets.push(e)),this.targetIndex}removeListenerTarget(t){this.targets.forEach((e,i)=>{e.el===t&&(e.childrenCount--,!e.childrenCount&&(this.initListen(e.el,!1),this.targets.splice(i,1),e=null))})}initListen(t,e){this.options.ListenEvents.forEach(i=>(e?(0,n.on):(0,n.S1))(t,i,this.lazyLoadHandler))}initEvent(){this.Event={listeners:{loading:[],loaded:[],error:[]}},this.$on=(t,e)=>{!this.Event.listeners[t]&&(this.Event.listeners[t]=[]),this.Event.listeners[t].push(e)},this.$once=(t,e)=>{let i=(...s)=>{this.$off(t,i),e.apply(this,s)};this.$on(t,i)},this.$off=(t,e)=>{if(!e){if(!this.Event.listeners[t])return;this.Event.listeners[t].length=0;return}(0,n.Od)(this.Event.listeners[t],e)},this.$emit=(t,e,i)=>{this.Event.listeners[t]&&this.Event.listeners[t].forEach(t=>t(e,i))}}lazyLoadHandler(){let t=[];this.listeners.forEach(e=>{(!e.el||!e.el.parentNode)&&t.push(e),e.checkInView()&&e.load()}),t.forEach(t=>{(0,n.Od)(this.listeners,t),t.$destroy()})}initIntersectionObserver(){n.Bm&&(this.observer=new IntersectionObserver(this.observerHandler.bind(this),this.options.observerOptions),this.listeners.length&&this.listeners.forEach(t=>{this.observer.observe(t.el)}))}observerHandler(t){t.forEach(t=>{t.isIntersecting&&this.listeners.forEach(e=>{if(e.el===t.target){if(e.state.loaded)return this.observer.unobserve(e.el);e.load()}})})}elRenderer(t,e,i){let s;if(!t.el)return;let{el:r,bindType:n}=t;switch(e){case"loading":s=t.loading;break;case"error":s=t.error;break;default:({src:s}=t)}if(n?r.style[n]='url("'+s+'")':r.getAttribute("src")!==s&&r.setAttribute("src",s),r.setAttribute("lazy",e),this.$emit(e,t,i),this.options.adapter[e]&&this.options.adapter[e](t,this.options),this.options.dispatchEvent){let i=new CustomEvent(e,{detail:t});r.dispatchEvent(i)}}valueFormatter(t){let e=t,{loading:i,error:s}=this.options;return(0,o.Kn)(t)&&({src:e}=t,i=t.loading||this.options.loading,s=t.error||this.options.error),{src:e,loading:i,error:s}}}}},37248:function(t,e,i){"use strict";i.d(e,{Z:function(){return o}});var s=i("22300"),r=i("83882"),n=i("12308");class o{constructor({el:t,src:e,error:i,loading:s,bindType:r,$parent:n,options:o,cors:a,elRenderer:l,imageCache:h}){this.el=t,this.src=e,this.error=i,this.loading=s,this.bindType=r,this.attempt=0,this.cors=a,this.naturalHeight=0,this.naturalWidth=0,this.options=o,this.$parent=n,this.elRenderer=l,this.imageCache=h,this.performanceData={loadStart:0,loadEnd:0},this.filter(),this.initState(),this.render("loading",!1)}initState(){"dataset"in this.el?this.el.dataset.src=this.src:this.el.setAttribute("data-src",this.src),this.state={loading:!1,error:!1,loaded:!1,rendered:!1}}record(t){this.performanceData[t]=Date.now()}update({src:t,loading:e,error:i}){let s=this.src;this.src=t,this.loading=e,this.error=i,this.filter(),s!==this.src&&(this.attempt=0,this.initState())}checkInView(){let t=(0,s.EL)(this.el);return t.top<window.innerHeight*this.options.preLoad&&t.bottom>this.options.preLoadTop&&t.left<window.innerWidth*this.options.preLoad&&t.right>0}filter(){Object.keys(this.options.filter).forEach(t=>{this.options.filter[t](this,this.options)})}renderLoading(t){this.state.loading=!0,(0,r.fY)({src:this.loading,cors:this.cors},()=>{this.render("loading",!1),this.state.loading=!1,t()},()=>{t(),this.state.loading=!1})}load(t=n.ZT){if(this.attempt>this.options.attempt-1&&this.state.error){t();return}if(!this.state.rendered||!this.state.loaded){if(this.imageCache.has(this.src))return this.state.loaded=!0,this.render("loaded",!0),this.state.rendered=!0,t();this.renderLoading(()=>{this.attempt++,this.options.adapter.beforeLoad?.(this,this.options),this.record("loadStart"),(0,r.fY)({src:this.src,cors:this.cors},e=>{this.naturalHeight=e.naturalHeight,this.naturalWidth=e.naturalWidth,this.state.loaded=!0,this.state.error=!1,this.record("loadEnd"),this.render("loaded",!1),this.state.rendered=!0,this.imageCache.add(this.src),t()},t=>{this.options.silent||console.error(t),this.state.error=!0,this.state.loaded=!1,this.render("error",!1)})})}}render(t,e){this.elRenderer(this,t,e)}performance(){let t="loading",e=0;return this.state.loaded&&(t="loaded",e=(this.performanceData.loadEnd-this.performanceData.loadStart)/1e3),this.state.error&&(t="error"),{src:this.src,state:t,time:e}}$destroy(){this.el=null,this.src=null,this.error=null,this.loading=null,this.bindType=null,this.attempt=0}}},83882:function(t,e,i){"use strict";i.d(e,{Bm:function(){return r},Ky:function(){return l},Od:function(){return o},P2:function(){return d},S1:function(){return c},bH:function(){return a},fY:function(){return p},lM:function(){return n},on:function(){return u},q6:function(){return h},ym:function(){return f}});var s=i("22300");let r=s._f&&"IntersectionObserver"in window&&"IntersectionObserverEntry"in window&&"intersectionRatio"in window.IntersectionObserverEntry.prototype,n={event:"event",observer:"observer"};function o(t,e){if(!t.length)return;let i=t.indexOf(e);if(i>-1)return t.splice(i,1)}function a(t,e){let i,s,r,n;if("IMG"!==t.tagName||!t.getAttribute("data-srcset"))return;let o=t.getAttribute("data-srcset"),a=t.parentNode.offsetWidth*e,l=(o=o.trim().split(",")).map(t=>(-1===(i=(t=t.trim()).lastIndexOf(" "))?(s=t,r=999998):(s=t.substr(0,i),r=parseInt(t.substr(i+1,t.length-i-2),10)),[r,s]));l.sort((t,e)=>{if(t[0]<e[0])return 1;if(t[0]>e[0])return -1;if(t[0]===e[0]){if(-1!==e[1].indexOf(".webp",e[1].length-5))return 1;if(-1!==t[1].indexOf(".webp",t[1].length-5))return -1}return 0});let h="";for(let t=0;t<l.length;t++){h=(n=l[t])[1];let e=l[t+1];if(e&&e[0]<a){h=n[1];break}if(!e){h=n[1];break}}return h}let l=(t=1)=>s._f&&window.devicePixelRatio||t;function h(){if(!s._f)return!1;let t=!0;try{let e=document.createElement("canvas");e.getContext&&e.getContext("2d")&&(t=0===e.toDataURL("image/webp").indexOf("data:image/webp"))}catch(e){t=!1}return t}function d(t,e){let i=null,s=0;return function(...r){if(i)return;let n=Date.now()-s,o=()=>{s=Date.now(),i=!1,t.apply(this,r)};n>=e?o():i=setTimeout(o,e)}}function u(t,e,i){t.addEventListener(e,i,{capture:!1,passive:!0})}function c(t,e,i){t.removeEventListener(e,i,!1)}let p=(t,e,i)=>{let s=new Image;if(!t||!t.src)return i(Error("image src is required"));s.src=t.src,t.cors&&(s.crossOrigin=t.cors),s.onload=()=>e({naturalHeight:s.naturalHeight,naturalWidth:s.naturalWidth,src:s.src}),s.onerror=t=>i(t)};class f{constructor({max:t}){this.options={max:t||100},this.caches=[]}has(t){return this.caches.indexOf(t)>-1}add(t){!this.has(t)&&(this.caches.push(t),this.caches.length>this.options.max&&this.free())}free(){this.caches.shift()}}},89492:function(t,e,i){"use strict";var s=i("80681"),r=i("11848"),n=i("54369"),o=i("24647"),a=i("8610");window.app&&window.app.use(a.Z,{lazyComponent:!0}),e.Z=(0,s.aZ)({__name:"index",setup(t){var e=(0,n.q)({"zh-CN":{title2:"\u80CC\u666F\u56FE\u61D2\u52A0\u8F7D",title3:"\u61D2\u52A0\u8F7D\u6A21\u5757"},"en-US":{title2:"Lazyload Background Image",title3:"Lazyload Component"}}),i=[(0,o.RQ)("apple-1.jpeg"),(0,o.RQ)("apple-2.jpeg"),(0,o.RQ)("apple-3.jpeg"),(0,o.RQ)("apple-4.jpeg")],a=[(0,o.RQ)("apple-5.jpeg"),(0,o.RQ)("apple-6.jpeg")],l=[(0,o.RQ)("apple-8.jpeg"),(0,o.RQ)("apple-7.jpeg")];return(t,n)=>{var o=(0,s.up)("demo-block"),h=(0,s.up)("lazy-component"),d=(0,s.Q2)("lazy");return(0,s.wg)(),(0,s.iD)(s.HY,null,[(0,s.Wm)(o,{title:(0,r.SU)(e)("basicUsage")},{default:(0,s.w5)(()=>[((0,s.wg)(),(0,s.iD)(s.HY,null,(0,s.Ko)(i,t=>(0,s.wy)((0,s._)("img",{key:t}),[[d,t]])),64))]),_:1},8,["title"]),(0,s.Wm)(o,{title:(0,r.SU)(e)("title2")},{default:(0,s.w5)(()=>[((0,s.wg)(),(0,s.iD)(s.HY,null,(0,s.Ko)(a,t=>(0,s.wy)((0,s._)("div",{key:t}),[[d,t,"background-image"]])),64))]),_:1},8,["title"]),(0,s.Wm)(o,{title:(0,r.SU)(e)("title3")},{default:(0,s.w5)(()=>[(0,s.Wm)(h,null,{default:(0,s.w5)(()=>[((0,s.wg)(),(0,s.iD)(s.HY,null,(0,s.Ko)(l,t=>(0,s.wy)((0,s._)("img",{key:t}),[[d,t]])),64))]),_:1})]),_:1},8,["title"])],64)}}})},24647:function(t,e,i){"use strict";i.d(e,{RQ:function(){return s}});var s=t=>"https://fastly.jsdelivr.net/npm/@vant/assets/".concat(t)},8610:function(t,e,i){"use strict";var s=i("99162");e.Z=s.J},93737:function(t,e,i){"use strict";i.r(t.exports={})},47098:function(t,e,i){"use strict";i.r(t.exports={})}}]); |