时间戳

首页 > 解决方案 > 加载图像后淡入 ajax 结果

javascript - 加载图像后淡入 ajax 结果

问题描述

我发现了一些类似于我的问题，但与过滤结果无关，所以我一直在努力寻找适合我的东西。在网站页面上，我有在单击不同链接时过滤掉的图像图块。我的问题是当图像仍在加载并且看起来很糟糕时，我的淡入触发正在发生。

只有在所有图像完全加载后，我才能触发我的淡入淡出？

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

标签： javascriptajax

解决方案

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

推荐阅读