0

私はpicturefill.js（Scott Jehl）を使用しています：https://github.com/scottjehl/picturefill/blob/master/picturefill.js

彼のドキュメントのように、スパンタグとデータ属性を使用して、セットアップする方法を次に示します（一部のコードは省略されています。これは、単なるメディアクエリのものでした）：

<figure>
    <a href='http://www.casaromeromexican.com'>
        <span id="picture" data-picture data-alt="Casa Romero Mexican website">
        <span data-src="img/casa-romero-mexican.jpg"></span>
        <span data-src="img/casa-romero-mexican@2x.jpg" data-media="(min-device-pixel-ratio: 2.0)"></span>
        <span data-src="img/casa-romero-mexican-md.jpg" data-media="(min-width: 768px") </span> 
// and so on...

期待どおり、正しい画像が読み込まれてページに配置されています。生成された HTML のスニペットを次に示します。

<span data-src="img/casa-romero-mexican-md.jpg" data-media="(min-width: 768px)"><img alt="Casa Romero Mexican website" src="img/casa-romero-mexican-md.jpg"></span>

私がやりたいのは、最終的に生成される img タグにクラスを追加することです。

ただし、追加された画像を選択することさえできません! これが私が取り組んでいるものです：

alert(($('#picture').children().find('img').size()));

画像がページ上にある場合でも、これは 0 を返します。メディア クエリに基づいてサイズ 1、b/c が返されることを期待しています。画像の 1 つは、picturefill を使用してページに追加されます。

DOM の読み込みに問題がないことを確認するために、picturefill.js をヘッダーに配置し (ほとんどの場合、JS はフッターに配置する必要があります)、さらには次のようにしました。

$(document).ready(function() {
        alert('ready!');
        alert(($('#picture').children().find('img').size()));
        });

まだimgが見つからないようです。

4

1 に答える 1

0

http://learn.jquery.com/using-jquery-core/document-ready/

これを読んだ後、jQuery が img を見つけられなかった理由がわかりました。この場合、$( window ).load(function() { ... }) を使用する必要がありました。DOM を待つだけの $( document ).ready() とは対照的に、これはページ全体が読み込まれるまでスクリプトを実行しません。

つまり、 $( document ).ready() はほとんどの場合問題ありませんが、メディア要素の読み込みに時間がかかるか、リクエストで取得する必要がある場合はそうではありません!

于 2013-10-03T23:46:42.703 に答える