update:优化图库加载

This commit is contained in:
jiewenhuang 2023-11-08 22:41:18 +08:00
parent 5094ed862b
commit 818b4e683f
2 changed files with 16 additions and 5 deletions

View File

@ -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}})})});

View File

@ -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&&currentIndex <= 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;
}