jquery -获取picturefill设置的图像的src。

Question

我正在使用史考特·杰尔的画像画来响应我的站点上的图片。我的代码如下所示：

<div data-picture id="front-image">
    <div data-src="image.jpg"></div>
    <div data-media="(min-width: 600px)" data-src="image-medium.jpg"></div>
    <div data-media="(min-width: 900px)" data-src="image-large.jpg"></div>
    <noscript><img src="image.jpg"></noscript>
</div>

在Picturefill处理完页面后，代码如下所示：

<div data-picture="" id="front-image">
    <div data-src="image.jpg"></div>
    <div data-media="(min-width: 600px)" data-src="image-medium.jpg"></div>
    <div data-media="(min-width: 900px)" data-src="image-large.jpg"></div>
    <noscript><img src="image.jpg"></noscript>
    <img alt="" src="image-large.jpg">
</div>

注意主div末尾的新img标记；这是脚本生成的标记(在本例中，因为我的浏览器窗口很大，所以是大图像)。

我想要获取那个图像的src，但是当我做一些类似的事情时

$(function() {
   var src = $('#front-image img').attr('src');
   // do other stuff with that variable once I have it
});

在Picturefill之后调用的javascript文件中，var为空。

我最好的猜测是，在Picturefill魔术发生之前，文档已经准备好了，js也已经评估好了。如何让我的代码等到Picturefill完成了它的任务之后，才能从img标记中抓取src？

完全不是一个javascript的人在这里，所以很明显，如果有其他的方式去获得src或我的猜测是完全错误的，请纠正我！

Answer 1

最后，我做了@raminson建议的第一件事--剪接一段picturefill脚本(在本例中是使用匹配媒体的部分)，并使用它来确定在这个屏幕大小上加载哪个图像是正确的。

        $("#front-image div").each(function() {
            var media = $(this).attr( "data-media" );
                if( !media || (matchMedia &&matchMedia( media ).matches ) ){
                    var imgsrc = $(this).attr("data-src");
                    // do stuff with the img src
                }
            });

Answer 2

选项使用DOMNodeInserted事件，该事件在插入新的node元素后触发。

$(document).on('DOMNodeInserted', function() {
   var src = $('#front-image > img').attr('src');
})

Answer 3

Picturefill很棒，但我在处理真实图像时遇到了一些类似的挑战。

最后，我创建了jquery.pikshur插件，这个插件与picturefill基本相同，但它使您对元素有了更多的控制，包括允许图像中的onLoad事件。