1

我正在使用Scott Jehl 的图片填充在我的网站上响应地提供图像。我的代码如下所示：

<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 或者我的猜测完全错误，请纠正我！]

4

3 回答 3

0

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

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

于 2013-04-20T20:51:10.233 回答
0

我最终做了@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
                }
            });
于 2012-07-17T14:46:51.967 回答
0

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

$(document).on('DOMNodeInserted', function() {
   var src = $('#front-image > img').attr('src');
})
于 2012-07-16T22:01:47.487 回答