update:图库加载过慢问题(#41)
This commit is contained in:
jiewenhuang
parent
b55c411a31
commit
e1e3c93b0f
|
|
@ -1 +1 @@
|
|||
class Sortable{constructor({parent:t,links:e=document.querySelectorAll("[data-sjslink]"),active:i="active",margin:s=20,responsive:n={980:{columns:3},480:{columns:2},0:{columns:1}},fadeDuration:r={in:300,out:0}}={}){this.parent=t,this.links=Array.from(e),this.active=i,this.margin=s,this.responsive=n,this.fadeDuration=r,this.elements=Array.from(this.parent.children),this.activeElements=this.elements,this.columns=1,this.dataLink="all",this.winWidth=window.innerWidth,this.init()}orderelements(){let{parent:t,activeElements:e,columns:r,blocWidth:a,margin:l}=this;var i=e.reduce((t,e,i)=>{var s=this._sumArrHeight(t,r),n=i%r*(a+l),s=0<=i-r?s[i%r]+l*Math.floor(i/r):0;return e.style.transform=`translate3d(${n}px, ${s}px, 0)`,t.push(e.offsetHeight),t},[]),i=this._sumArrHeight(i,r),i=Math.max(...i)+l*(Math.floor(e.length/r)-1);t.style.height=i+"px"}handleFilterClick(t,e){t.preventDefault();let{links:i,active:s}=this;e.dataset.sjslink!==this.dataLink&&(this.dataLink=e.dataset.sjslink,i.forEach(t=>{t.isEqualNode(e)?t.classList.add(s):t.classList.remove(s)}),this._filterElements(()=>{this.orderelements()}))}resize(){window.addEventListener("resize",()=>{clearTimeout(window.sortableResize),window.sortableResize=setTimeout(()=>{this.winWidth=window.innerWidth,this._setBlocWidth(()=>{this.orderelements()})},500)})}init(){let{parent:t,links:e,active:i}=this;e.forEach((e,t)=>{0===t&&(e.classList.add(i),this.dataLink=e.dataset.sjslink),e.addEventListener("click",t=>{this.handleFilterClick(t,e)})}),this._setBlocWidth(),window.addEventListener("load",()=>{this._filterElements(()=>{this.orderelements()}),t.style.opacity=1}),this.resize();const s=new IntersectionObserver(t=>{t.forEach(t=>{var e;t.isIntersecting&&(e=(t=t.target).getAttribute("data-src"),t.setAttribute("src",e),s.unobserve(t))})},{threshold:.5});document.querySelectorAll("img.card__picture").forEach(t=>{s.observe(t)})}_setBlocWidth(t){var{parent:e,elements:i,margin:s,responsive:n}=this,n=this.columns=this._columnsCount(n).columns;let r=this.blocWidth=(e.clientWidth-s*(n-1))/n;i.forEach(t=>{t.style.width=r+"px"}),t&&t()}_filterElements(t){let{elements:e,dataLink:i,fadeDuration:s}=this;this.activeElements=e.filter(t=>"all"!==i&&t.dataset.sjsel!==i?(this._fadeOut(t,s.out),!1):(this._fadeIn(t,s.in),!0)),t&&t()}_sumArrHeight(t,s){return t.reduce((t,e,i)=>{i%=s;return t[i]||(t[i]=0),t[i]=t[i]+e,t},[])}_columnsCount(t){let i=this["winWidth"];return Object.entries(t).reduce((t,e)=>i>e[0]&&e[0]>=Math.max(t.width)?{width:e[0],columns:e[1].columns}:t,{width:0,columns:4})}_fadeIn(e,t=300,i){let s=parseFloat(window.getComputedStyle(e,null).getPropertyValue("opacity")),n=16/t;e.style.display="block",requestAnimationFrame(function t(){(s+=n)<=1?(e.style.opacity=s,requestAnimationFrame(t)):(e.style.opacity=1,i&&i())})}_fadeOut(e,t=300,i){let s=parseFloat(window.getComputedStyle(e,null).getPropertyValue("opacity")),n=t?16/t:1;requestAnimationFrame(function t(){0<=(s-=n)?(e.style.opacity=s,requestAnimationFrame(t)):(e.style.opacity=0,e.style.display="none",i&&i())})}}HTMLElement.prototype.sortablejs=HTMLElement.prototype.sortablejs||function(t){return new Sortable({parent:this,...t})};
|
||||
class Sortable{constructor({parent:t,links:e=document.querySelectorAll("[data-sjslink]"),active:i="active",margin:s=20,responsive:n={980:{columns:3},480:{columns:2},0:{columns:1}},fadeDuration:r={in:300,out:0}}={}){this.parent=t,this.links=Array.from(e),this.active=i,this.margin=s,this.responsive=n,this.fadeDuration=r,this.elements=Array.from(this.parent.children),this.activeElements=this.elements,this.columns=1,this.dataLink="all",this.winWidth=window.innerWidth,this.init()}orderelements(){let{parent:t,activeElements:e,columns:r,blocWidth:a,margin:l}=this;var i=e.reduce((t,e,i)=>{var s=this._sumArrHeight(t,r),n=i%r*(a+l),s=0<=i-r?s[i%r]+l*Math.floor(i/r):0;return e.style.transform=`translate3d(${n}px, ${s}px, 0)`,t.push(e.offsetHeight),t},[]),i=this._sumArrHeight(i,r),i=Math.max(...i)+l*(Math.floor(e.length/r)-1);t.style.height=i+"px"}handleFilterClick(t,e){t.preventDefault();let{links:i,active:s}=this;e.dataset.sjslink!==this.dataLink&&(this.dataLink=e.dataset.sjslink,i.forEach(t=>{t.isEqualNode(e)?t.classList.add(s):t.classList.remove(s)}),this._filterElements(()=>{this.orderelements()}))}resize(){window.addEventListener("resize",()=>{clearTimeout(window.sortableResize),window.sortableResize=setTimeout(()=>{this.winWidth=window.innerWidth,this._setBlocWidth(()=>{this.orderelements()})},500)})}init(){let{parent:i,links:t,active:s}=this;t.forEach((e,t)=>{0===t&&(e.classList.add(s),this.dataLink=e.dataset.sjslink),e.addEventListener("click",t=>{this.handleFilterClick(t,e)})}),this._setBlocWidth();const n=new IntersectionObserver(t=>{t.forEach(t=>{var e;t.isIntersecting&&(e=(t=t.target).getAttribute("data-src"),t.setAttribute("src",e),this._filterElements(()=>{this.orderelements()}),i.style.opacity=1,n.unobserve(t))})},{threshold:0});document.querySelectorAll("img.card__picture").forEach(t=>{n.observe(t)}),this.resize()}_setBlocWidth(t){var{parent:e,elements:i,margin:s,responsive:n}=this,n=this.columns=this._columnsCount(n).columns;let r=this.blocWidth=(e.clientWidth-s*(n-1))/n;i.forEach(t=>{t.style.width=r+"px"}),t&&t()}_filterElements(t){let{elements:e,dataLink:i,fadeDuration:s}=this;this.activeElements=e.filter(t=>"all"!==i&&t.dataset.sjsel!==i?(this._fadeOut(t,s.out),!1):(this._fadeIn(t,s.in),!0)),t&&t()}_sumArrHeight(t,s){return t.reduce((t,e,i)=>{i%=s;return t[i]||(t[i]=0),t[i]=t[i]+e,t},[])}_columnsCount(t){let i=this["winWidth"];return Object.entries(t).reduce((t,e)=>i>e[0]&&e[0]>=Math.max(t.width)?{width:e[0],columns:e[1].columns}:t,{width:0,columns:4})}_fadeIn(e,t=300,i){let s=parseFloat(window.getComputedStyle(e,null).getPropertyValue("opacity")),n=16/t;e.style.display="block",requestAnimationFrame(function t(){(s+=n)<=1?(e.style.opacity=s,requestAnimationFrame(t)):(e.style.opacity=1,i&&i())})}_fadeOut(e,t=300,i){let s=parseFloat(window.getComputedStyle(e,null).getPropertyValue("opacity")),n=t?16/t:1;requestAnimationFrame(function t(){0<=(s-=n)?(e.style.opacity=s,requestAnimationFrame(t)):(e.style.opacity=0,e.style.display="none",i&&i())})}}HTMLElement.prototype.sortablejs=HTMLElement.prototype.sortablejs||function(t){return new Sortable({parent:this,...t})};
|
||||
|
|
@ -98,14 +98,14 @@ class Sortable {
|
|||
|
||||
this._setBlocWidth()
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
this._filterElements(()=>{
|
||||
this.orderelements()
|
||||
})
|
||||
parent.style.opacity = 1
|
||||
})
|
||||
// window.addEventListener('load', () => {
|
||||
// this._filterElements(()=>{
|
||||
// this.orderelements()
|
||||
// })
|
||||
// parent.style.opacity = 1
|
||||
// })
|
||||
|
||||
|
||||
this.resize()
|
||||
//使用Intersection Observer API实现懒加载
|
||||
const ob = new IntersectionObserver(
|
||||
(entries)=>{
|
||||
|
|
@ -114,16 +114,23 @@ class Sortable {
|
|||
const img = entry.target;
|
||||
const src = img.getAttribute('data-src');
|
||||
img.setAttribute('src',src);
|
||||
ob.unobserve(img);
|
||||
|
||||
this._filterElements(()=>{
|
||||
this.orderelements()
|
||||
})
|
||||
parent.style.opacity = 1
|
||||
|
||||
ob.unobserve(img)
|
||||
}
|
||||
})
|
||||
},{
|
||||
threshold:0.5
|
||||
});
|
||||
},{
|
||||
threshold:0
|
||||
});
|
||||
const imgs = document.querySelectorAll('img.card__picture');
|
||||
imgs.forEach((img)=>{
|
||||
ob.observe(img);
|
||||
})
|
||||
this.resize()
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -227,4 +234,4 @@ class Sortable {
|
|||
|
||||
HTMLElement.prototype.sortablejs = HTMLElement.prototype.sortablejs || function(params){
|
||||
return new Sortable({parent: this, ...params})
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue