0

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

这是我设置它的方式，（一些代码省略了 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 个图像被附加到带有图片填充的页面。

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

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

似乎仍然没有找到img。

4

1 回答 1

0

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

读完之后，我明白了为什么 jQuery 没有找到 img。在这种情况下，有必要使用 $( window ).load(function() { ... })。这将在整个页面加载之前不会运行脚本，而不是 $( document ).ready()，它只等待 DOM。

换句话说， $( document ).ready() 大部分时间都很好，但在等待可能需要更长时间加载和/或需要通过请求获取的媒体元素时则不然！

于 2013-10-03T23:46:42.703 回答