Ленивая загрузка результатов от фильтра категории ajax и нумерации страниц - PullRequest
0 голосов
/ 11 июня 2019

Спасибо, что нашли время, чтобы прочитать мой вопрос.Я провёл пару дней в интернете, пробуя разные ленивые скрипты загрузки, но не повезло.

У меня есть блог с ajax-фильтром и пагинацией, который вы можете просмотреть здесь: http://projectfresh.startwithplate.com/posts (у меня в настоящее время отложенная загрузка, чтобы сохранить работоспособность)

Получение ленивой нагрузки на работу - это арахис, но заставить его работать с этими фильтрами - это совсем другая история.Я знаю, что идет не так: ленивая загрузка не запускается снова, когда вы фильтруете или используете нумерацию страниц, поэтому вы не видите изображения.

Может ли кто-нибудь помочь мне с этим?У меня просто нет знаний, чтобы заставить его работать должным образом.На данный момент я наиболее знаком с этим сценарием Lazy Load: https://github.com/verlok/lazyload

Это демо, которое, вероятно, является решением для моей проблемы, но я не могу заставить его работать: https://github.com/verlok/lazyload/blob/master/demos/dynamic_content.html

Сценарий Lazy Load, который отлично работает для моего сайта, кроме блога:

<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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...