Спасибо, что нашли время, чтобы прочитать мой вопрос.Я провёл пару дней в интернете, пробуя разные ленивые скрипты загрузки, но не повезло.
У меня есть блог с 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