Fade In ajax результатов ПОСЛЕ загрузки изображений

Question

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

Как я могу переключить мой fadeIn на go только после того, как все мои изображения полностью загружены?

$(document).ready(function() {
      $(document).on('click', '.js-filter-item > a', function(e){
        e.preventDefault();
        var category = $(this).data('category')
        
        $.ajax({
          url: wpAjax.ajaxUrl,
          data: { action: 'filter', category: category },
          type: 'post',
          beforeSend: function() {
            $("#projects-container").slideUp();
          },
          success: function(result) {
            $("#projects-container").hide().html(result).fadeIn(1500);
            $(".misha_loadmore").hide();
          },
          error: function(result) {
            console.warn(result);
          }
        });
      });
      }

Answer 1

Спасибо @ imvain2 за то, что указал мне в правильном направлении. Вот что в итоге сработало для меня. Я почти уверен, что это просто задерживает время загрузки с помощью setTimeout, не похоже, что функция imagesLoaded работает для меня очень хорошо, но выглядит намного более плавной. Надеюсь, это поможет кому-нибудь с моей проблемой.

          success  : function(data) {

        $(data).hide().appendTo('#projects-container');

        var imagesCount = $('.project-image').find('img').length;
        var imagesLoaded = 0;

        $('.project-image').find('img').load( function() {
            ++imagesLoaded;
            if (imagesLoaded >= imagesCount) {
                $('#projects-container').children().show();
            }
        });

        var timeout = setTimeout(function() {
          $('#projects-container').html(data).slideDown();
        }, 1500);
    },