Question

我正在使用Scott Jehl's 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>
</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

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

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

Answer 2

我最终做了@raminson建议的第一件事 - 拼接出一部分图片填充脚本（在这种情况下使用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
                }
            });

Answer 3

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

我最终创建的jquery.pikshur插件与picturefill基本相同，但是可以让你对元素进行更多控制，包括允许图像的onLoad事件。

jquery - 获取picturefill设置的src图像

3 个答案: