update:优化图库加载
This commit is contained in:
parent
5094ed862b
commit
818b4e683f
|
@ -1 +1 @@
|
|||
$(document).ready(function(){const s=$("#image-grid").isotope({itemSelector:".grid-item",percentPosition:!0,masonry:{columnWidth:".grid-item"}});let n=[],a=0;const r=ThemeConfig.blog_url;function t(){const i=$(".joe_loading");var t,e;t=function(){for(var e=a+6,t=[];a<e&&a<n.length;a++){var o=n[a],o=$('<div class="grid-item wow fadeIn" data-sjsel="'+o.spec.groupName+'"><div class="card__picture"><a class="item animated wow jg-entry" href="'+o.spec.url+'" data-fancybox="gallery"><img src="'+r+o.spec.url+'" alt="'+o.spec.displayName+'"/></a></div></div>');t.push(o[0])}s.append(t).isotope("appended",t).imagesLoaded().progress(function(){s.isotope("layout")}),a>=n.length&&(i.remove(),l.unobserve(c))},n.length?t():(e=r+"/apis/api.plugin.halo.run/v1alpha1/plugins/PluginPhotos/photos",$.getJSON(e,function(e){n=e.items,t()}))}t();const l=new IntersectionObserver(e=>{e[0].isIntersecting&&t()},{threshold:1}),c=document.querySelector(".joe_loading");l.observe(c),$(".joe_photos__filter li").on("click",function(){let t=$(this).attr("data-sjslink");console.log(t),$(this).addClass("active").siblings().removeClass("active"),s.isotope({filter:function(){var e=$(this).attr("data-sjsel");return console.log("Filtering:",e,t),"*"===t||e===t}})})});
|
||||
$(document).ready(function(){const o=$("#image-grid").isotope({itemSelector:".grid-item",percentPosition:!0,masonry:{columnWidth:".grid-item"}});let n=[],a=0;const l=ThemeConfig.blog_url;function t(){const s=$(".joe_loading");var t,e;t=function(){for(var e=a+6,t=[];a<e&&a<n.length;a++){var i=n[a],i=$('<div class="grid-item wow fadeIn" data-sjsel="'+i.spec.groupName+'"><div class="card__picture"><a class="item animated wow jg-entry" href="'+i.spec.url+'" data-fancybox="gallery"><img src="'+l+i.spec.url+'" alt="'+i.spec.displayName+'"/></a></div></div>');t.push(i[0])}o.append(t).isotope("appended",t).imagesLoaded().progress(function(){o.isotope("layout")}),a>=n.length&&(s.remove(),r.unobserve(c))},n.length?t():(e=l+"/apis/api.plugin.halo.run/v1alpha1/plugins/PluginPhotos/photos",$.getJSON(e,function(e){n=e.items,t()}))}t();const r=new IntersectionObserver(e=>{if(e[0].isIntersecting){t();let e=$(".grid-item").filter(function(){return $(this).data("sjsel")===$(".joe_photos__filter li.active").data("sjslink")});if(0===e.length&&a<=n.length&&"*"!==$(".joe_photos__filter li.active").data("sjslink"))for(;0===e.length&&a<=n.length;)t(),e=$(".grid-item").filter(function(){return $(this).data("sjsel")===$(".joe_photos__filter li.active").data("sjslink")})}},{threshold:1}),c=document.querySelector(".joe_loading");r.observe(c),$(".joe_photos__filter li").on("click",function(){let t=$(this).attr("data-sjslink");$(this).addClass("active").siblings().removeClass("active"),o.isotope({filter:function(){var e=$(this).attr("data-sjsel");return"*"===t||e===t}})})});
|
|
@ -71,10 +71,23 @@ $(document).ready(function(){
|
|||
|
||||
// 初始加载
|
||||
loadBatchImages();
|
||||
|
||||
const ob = new IntersectionObserver(entries => {
|
||||
if (entries[0].isIntersecting){
|
||||
loadBatchImages();
|
||||
}
|
||||
let filteredDivs = $('.grid-item').filter(function() {
|
||||
return $(this).data('sjsel') === $('.joe_photos__filter li.active').data('sjslink');
|
||||
});
|
||||
if (filteredDivs.length===0 && currentIndex <= allImages.length && $('.joe_photos__filter li.active').data('sjslink')!=='*') {
|
||||
while (filteredDivs.length===0&¤tIndex <= allImages.length){
|
||||
loadBatchImages();
|
||||
filteredDivs = $('.grid-item').filter(function() {
|
||||
return $(this).data('sjsel') === $('.joe_photos__filter li.active').data('sjslink');
|
||||
});
|
||||
}
|
||||
}else {
|
||||
}
|
||||
}
|
||||
|
||||
}, {
|
||||
threshold:1
|
||||
|
@ -85,15 +98,13 @@ $(document).ready(function(){
|
|||
|
||||
$('.joe_photos__filter li').on('click', function(){
|
||||
let filterValue = $(this).attr('data-sjslink');
|
||||
console.log(filterValue)
|
||||
// 添加active
|
||||
$(this).addClass('active').siblings().removeClass('active');
|
||||
// 重置 Isotope 过滤器为默认值
|
||||
$grid.isotope({
|
||||
filter: function() {
|
||||
// 这里 "this" 指的是每一个被 Isotope 处理的元素
|
||||
// 检查 data-sjsel 属性值是否匹配我们筛选的值
|
||||
const sjselValue = $(this).attr('data-sjsel'); // 这里获取的是.grid-item的data-sjsel
|
||||
console.log('Filtering:', sjselValue, filterValue);
|
||||
// 如果 filterValue 是 '*'(显示所有),或者 sjselValue 匹配筛选值,则保留元素
|
||||
return filterValue === '*' || sjselValue === filterValue;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue