jQuery.ajax后期加载图片?

时间:2014-01-30 23:05:18

标签: jquery html ajax

我有一个网站,可以将html加载并注入页面进行编辑。我加载html时要做的第一件事就是我检查图像并用它们做一些处理。它不应该要求它们一直加载 - 只是它们的属性 - 让我来处理它们。

网站上有一个文件夹,当我从该文件夹加载html并将其取回时,它无法正确加载图像。如果我记录返回的responseText,我可以将图像看作其中的元素。例如:

var ajax=$.ajax({
    url:url,       
    data:data,
    accepts:'html',
    dataType:'html',
    success:function(data){
      console.log($(data)) // -> logs jQuery HTML object to Chrome console w/ images
      console.log($(data).find('img')); // -> []
      window.d=$(data); // global object that I can parse in console and extract img
      });

以下是同样的问题:

    var ajax=$.ajax({
      url:url,
      data:data,
      accepts:'html',
      dataType:'html'
     });

     ajax.then(function(data){
      console.log($(data)) // -> logs jQuery HTML object to Chrome console
      console.log($(data).find('img').toArray()); // -> returns []
      window.d=$(data); // global object that I can parse in console and extract img
     });

我对图像的处理并不复杂。我只是解析它们的源并将它存储在一个全局对象中。

这怎么可能?

编辑:我稍微修改了一下以更准确地反映案例。此外,请记住,这个特定的ajax调用在所有其他情况下都可以接受这个文件夹(可能是五个差异.html文件):所以我会想象错误在某种程度上是由与图像加载方式有关而得出的?但这没有任何意义。

编辑2 :每个请求,以下是错误发生时返回的html示例。正如您在第二行所看到的,有一个img

<h2>About Frank A. ..., M.D.</h2>
<img class="fltleft" width="200" height="243" alt="Dr. ..." src="http://zjq.metapsychology.org/imgs/research_pub/img1.jpg">
<br>
<p>... is an Honors graduate of Stanford University who later pursued graduate studies in philosophy at Cambridge University in England. He received his medical degree from yale University, and completed a psychiatric residency at Stanford University Medical Center in the early 1970s.  ....</p>

我缩写了输出。但那里有一个图像。

1 个答案:

答案 0 :(得分:1)

您的图片不是数据中根元素的后代,它们是数据中的根元素。请改用过滤器。

console.log($(data).filter('img'));

并找到根和后代,以便它在两种情况下都有效,请使用:

console.log($(data).find('img').addBack().filter('img'));
// find all images in data, add back the root elements, then filter to only images.