Question

感谢您抽出宝贵时间阅读我的问题。我花了几天的时间在Internet上闲逛，尝试使用不同的延迟加载脚本，但没有运气。

我有一个博客，带有ajax过滤器和分页功能，您可以在这里查看：http://projectfresh.startwithplate.com/posts（为了使一切正常运行，我目前已停用了延迟加载功能）

让懒惰工作正常工作是花生，但是让它们与这些过滤器一起工作又是另外一回事了。我知道出了什么问题：在过滤或使用分页时不会再次触发延迟加载，因此您看不到图像。

有人可以帮我解决这个问题吗？我只是不知道如何使其正常工作。目前，我最熟悉此延迟加载脚本：https://github.com/verlok/lazyload

这是可能是我的问题的解决方案的演示，但我无法使其正常工作：https://github.com/verlok/lazyload/blob/master/demos/dynamic_content.html

除了博客以外，对我的网站运行良好的惰性加载脚本：

<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script>
<script>
var lazyLoadInstance = new LazyLoad({
    elements_selector: ".lazy"  
});  
</script>

这是过滤器和分页：

$(function() {

  // Filter projects and posts
  var lang = $("html").attr("lang");
  $(document).on("change", ".category-selection-field input[type=checkbox]", function(){
    var slugs = $('.category-selection-field input[type=checkbox]:checked')
                  .map(function(){return $(this).attr("data-slug")})
                  .get()
                  .join(",");
    var post_type = $(this).attr("data-post-type");

    var get_url = "";
    if($(this).attr("data-main-language") == "true"){
       get_url = "/apis?categories="+slugs+"&post_type="+post_type;
    }else{
       get_url = "/"+ lang +"/apis?categories="+slugs+"&post_type="+post_type;
    }

    window.history.pushState(null, null, "?categories=" + slugs);
    $.ajax({url: get_url , success: function(result){
      $("#post-card-container").html(result).hide().fadeIn(500);
    }});
  });

  // Ajaxify the pagination
  $(document).on("click", ".paginate-navigation-js a", function(e){
    e.preventDefault();

    var stored_params = $(this).attr("href").split("?")[1];
    if(!stored_params.includes("post_type")){
      stored_params += "&post_type=" + $(".category-selection-field input[type=checkbox]").attr("data-post-type");
    }

    var get_url = "";
    if($(".category-selection-field input[type=checkbox]").attr("data-main-language") =="true"){
       get_url = "/apis?"+stored_params;
    }else{
       get_url = "/"+ lang +"/apis?"+stored_params;
    }

    if(get_url != ""){
      $.ajax({url: get_url , success: function(result){
        $("#post-card-container").html(result).hide().fadeIn(500);
        $('html,body').animate({
          scrollTop: $("#post-card-container").offset().top
        }, 500);
      }});
    }
  })

});

我希望有人想帮助我！：）提前致谢。：D

延迟加载ajax类别过滤器和分页的结果

0 个答案: