加载图像后显示 AJAX 内容答案

【问题标题】：Show AJAX content after images have loaded加载图像后显示 AJAX 内容
【发布时间】：2010-06-08 14:29:56
【问题描述】：

我正在开发自己的灯箱类型的 jquery 插件。一切正常，但我想隐藏加载的内容，直到图像从 AJAX 调用加载到浏览器中。我发现了一个类似的帖子，我正在使用以下脚本，但 setTimeout 函数是显示内容的，而不是 .load 函数。我是否正在努力实现不可能的目标？

$.ajax({
      url: 'meet/'+ pLoad + '.html',  
      success: function(data) {
        var imageCount = $(data).filter('img').length;
        var imagesLoaded = 0;
        $(data).hide()
         .appendTo('#zoom_inner')
         .filter('img')
         .load( function() {
          ++imagesLoaded;
          if (imagesLoaded >= imageCount) {
          $('#zoom_inner').children().show();
          }
          });
        setTimeout( function() { $('#zoom_inner').children().show() }, 5000 );
       }
    });

【问题讨论】：

您能否为我们突出显示您的代码并按下编辑器工具栏中的“代码”按钮（带有 1 和 0 的按钮）？
很抱歉... setTimeout 功能是存在的，以防加载功能不起作用。绝对是这样......这是一个工作演示，dev.alcostores.com/abt_career_meet.aspx

标签： javascript jquery ajax image load

【解决方案1】：

关于你的 cmets：

数据只是成功回调中的一个字符串 - 它是“html”，但它是一个字符串。

让它成为一个节点来使用：

var $images = $(data); // i.e. turn <div><img /></div> into a div with an img as a child or whatever you got
var imageCount = $images.find('img').length;

很酷，嗯？

【讨论】：

你测试过任何变量吗？ imageCount 的计数是否正确？ imagesLoaded 增加了吗？即使++imagesLoaded; 之后的alert(imagesLoaded); 也有助于验证。
现在这样做，并且 imageCount 不会增加超过 0 现在正在排除故障。任何想法为什么不会 $(data).filter('img').length;只会返回 0
感谢 Dan，我找到了一个类似的解决方案 - $(data).hide().appendTo('#zoom_inner'); var images = document.getElementById("zoom_inner").getElementsByTagName('img');
为了 jQuery 的酷炫，可以改写为 $('#zoom_inner').append( $(data).hide() ).find('img'); :p
这并不能证明图像已经 100% 加载到浏览器中，请参阅 jQuery load() 函数，即使这也不是 100% 跨浏览器安全的。据我所知，使用 ajax 还没有任何好的方法可以做到这一点。然而，这应该表明图像至少已经开始加载。

【解决方案2】：

如果您研究这篇文章，我认为您可以找到解决问题的方法 (http://jqueryfordesigners.com/image-loading/)

最好的祝愿。

【讨论】：