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

我使用Scott Jehl's picturefill在我的网站上响应地提供图像。我的代码看起来是这样的：页面已被Picturefill处理jquery - 获取由picturefill设置的图像的src

<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>

后，代码如下：

<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，但是当我在被Picturefill后调用javascript文件这样做

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

，该变种是空的。

我最好的猜测是该文件是'准备好'和js评估之前 Picturefill魔术发生。我如何让我的代码等到Picturefill完成其职责，以便我可以从该img标签获取src？

[完全不是一个JavaScript这里的人如此明显，如果有另一种方式去获得的SRC或我的猜测是完全错误请指正！]

来源

2012-07-16 Eileen

最后我做的第一件事情之一@raminson建议 - 拼接出一块picturefill脚本（使用matchmedia，在这种情况下的部分），并用它来找出哪些图像是正确的加载此屏幕大小。

 $("#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 
       } 
      });

来源

2012-07-17 14:46:51 Eileen

上选择是使用DOMNodeInserted事件，其中插入后触发一个新的node元素。

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

来源

2012-07-16 22:01:47 undefined

在ie中有效吗？谷歌说，即不会触发该事件 – mkoryak 2012-07-16 22:04:09

@mkoryak是的，不幸的是，这个事件只支持现代浏览器。 – undefined 2012-07-16 22:04:49

不要挑剔，但是如果在插入他关心的图像元素之前插入100个其他元素呢？ – mkoryak 2012-07-16 22:09:13

Picturefill非常棒，但我在处理真实图像方面遇到了一些类似的挑战。

我最终创建了jquery.pikshur插件，它的功能与picturefill基本相同，但是可以更多地控制元素，包括允许图像的onLoad事件。

来源

2013-04-20 20:51:10

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

回答

相关问题