jquery - 获取图片填充设置的图像的src答案

【问题标题】：jquery - get src of image set by picturefilljquery - 获取图片填充设置的图像的src
【发布时间】：2012-07-16 21:54:39
【问题描述】：

我正在使用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 为空。

我最好的猜测是文档已经“准备好”，并且 js 在 Picturefill 魔术发生之前进行了评估。我怎样才能让我的代码等到 Picturefill 完成其职责，以便我可以从该 img 标签中获取 src？

[这里完全不是 javascript 人，所以很明显，如果有其他方法可以获取 src 或者我的猜测完全错误，请纠正我！]

【问题讨论】：

标签： jquery image responsive-design src

【解决方案1】：

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

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

【讨论】：

在 ie 中有效吗？谷歌说 ie 不会触发那个事件
@mkoryak 是的，不幸的是，这个事件只被现代浏览器支持。
不是吹毛求疵，但如果他在插入他关心的图像元素之前插入 100 个其他元素呢？
当然不会插入 100 个其他元素，但我也收到一个错误，提示“$("body").on is not a function" in FF11.
@Eileen 听起来您使用的是旧版本的 jQuery，其中 on 不存在，您可以将 on 替换为 live。

【解决方案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
                }
            });

【讨论】：

【解决方案3】：

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

我最终创建了jquery.pikshur 插件，它的功能与图片填充基本相同，但让您可以对元素进行更多控制，包括允许图像的 onLoad 事件。

【讨论】：