Question

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

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

<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/casa-romero-mexican@2x.jpg" 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（）。

换句话说，$（document）.ready（）在大多数情况下都很好，但在等待可能需要更长时间加载和/或需要通过请求获取的媒体元素时却不行！

如何使用appendChild选择放置在跨度内的img？

1 个答案: