如何选择放置在带有appendChild的跨度内的img？

Question

我正在使用picturefill.js（Scott Jehl）：https://github.com/scottjehl/picturefill/blob/master/picturefill.js

以下是我如何设置它，（一些代码省略了b/c，这只是更多的媒体查询内容）使用span标签和数据属性，如他的留档：

<figure>
    <a href='http://www.casaromeromexican.com'>
        <span id="picture" data-picture data-alt="Casa Romero Mexican website">
        <span data-src="img/casa-romero-mexican.jpg"></span>
        <span data-src="img/[e-mail]" data-media="(min-device-pixel-ratio: 2.0)"></span>
        <span data-src="img/casa-romero-mexican-md.jpg" data-media="(min-width: 768px") </span> 
// and so on...

正确的img正在加载并按预期放置在页面上。以下是生成的HTML的一个片段：

<span data-src="img/casa-romero-mexican-md.jpg" data-media="(min-width: 768px)"><img alt="Casa Romero Mexican website" src="img/casa-romero-mexican-md.jpg"></span>

我想做的是向最终生成的img标签添加一个类。

然而，我甚至不能选择附加的img！以下是我正在做的：

alert(($('#picture').children().find('img').size()));

即使图像在页面上，也返回0。我希望它返回的大小为1，b/c。根据媒体查询，其中1个图像将附加到带有picturefill的页面。

为了确保DOM加载没有问题，我把picturefill.js放在页眉中（尽管JS大部分时间应该放在页脚中），甚至这样做了：

$(document).ready(function() {
        alert('ready!');
        alert(($('#picture').children().find('img').size()));
        });

仍然没有找到img。

Answer 1

http://learn.jquery.com/using-jquery-core/document-ready/

读了这篇文章后，我明白了为什么jQuery没有找到img。在本例中，有必要使用$（window.load（function（）{…}）。与只等待DOM的$（document）.ready（）相反，在加载整个页面之前，不会运行脚本。

换句话说，$（文档）。就绪（）大部分时间都很好，但在等待可能需要更长时间加载和/或需要用请求获取的媒体元素时就不行了！