Fade In ajax results AFTER images are loaded

Question

I found a few questions similar to mine, but nothing to do with a filter result so I have been struggling finding something that works for me. On a website page, I have image tiles that are filtered down when different links are clicked. My problem is that my fade in trigger is happening when the images are still loading and it looks horrible.

How can I trigger my fadeIn to go off only after all my images are fully loaded?

$(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);
          }
        });
      });
      }

You will want to loop through all of the images to detect that they have been loaded: https://stackoverflow.com/questions/20613984/jquery-or-javascript-check-if-image-loaded — imvain2, Aug 06 '20 at 20:53
@imvain2 thank you. I don't believe I'm incorporating this correctly -- can you point me in the right direction? success: function(result) { var img = document.getElementById('project-image'); var func = function(){ $("#projects-container").hide().html(result).fadeIn(1500); $(".misha_loadmore").hide(); }; if(img.complete){ func.call(img); } else{ img.onload=func; }; }, — Kathleen Haynes, Aug 06 '20 at 21:02
this one might actually work better: It works with multiple images https://stackoverflow.com/questions/11071314/javascript-execute-after-all-images-have-loaded — imvain2, Aug 06 '20 at 21:11
@imvain2 How would I incorporate that in the success field? I am getting confused with the function(result) and the functions I will need to add for the img loader. — Kathleen Haynes, Aug 07 '20 at 12:23

score 0 · Accepted Answer · answered Aug 07 '20 at 15:35

Thanks to @imvain2 for pointing me in the right direction. Here is what ended up working for me. I'm pretty sure it's just delaying the load time using setTimeout, it doesn't seem like the imagesLoaded function works very well for me, but it looks a lot smoother. Hope this helps anyone with my same issue.

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

Fade In ajax results AFTER images are loaded

1 Answers1