1

私はScottJehlの画像塗りつぶしを使用して、自分のサイトで応答性の高い画像を提供しています。私のコードは次のようになります。

<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ファイルでは、変数は空です。

私の推測では、ドキュメントは「準備完了」であり、Picturefillマジックが発生する前にjsが評価されます。Picturefillがその義務を果たすまでコードを待機させて、そのimgタグからsrcを取得できるようにするにはどうすればよいですか？

[ここでは完全にJavaScriptの人ではないので、srcを取得する別の方法がある場合、または私の推測が完全に間違っている場合は、修正してください！]

4

3 に答える 3

0

onオプションは、新しい要素DOMNodeInsertedの挿入後に発生するイベントを使用しています。node

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

@raminsonが最初に提案したことの1つを実行することになりました。つまり、画像入力スクリプトの一部（この場合は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

Picturefillは素晴らしいですが、私は実際の画像の処理に関していくつかの同様の課題を抱えていました。

最終的には、画像の塗りつぶしと基本的に同じことを行うjquery.pikshurプラグインを作成しましたが、画像のonLoadイベントを許可するなど、要素をもう少し制御できます。

于 2013-04-20T20:51:10.233 に答える