1

WordPressブログのレスポンシブ画像にforesight.jsを使用しようとしています。そのためには、<img>タグのsrcの代わりにdata-src属性を追加する必要があります。

または、投稿の画像からURLを取得し、新しいタグを古いタグの近くにバインドして、その古いタグを<img>タグでラップする必要があります。どうしたらいいのかわからない。<img><noscript>

基本的には次のようになります。

<img data-src="http://foresightjs.appspot.com/dynamic-images/px-wright-flyer.jpg" data-aspect-ratio="auto" class="fs-img">

<noscript>
    <img src="http://foresightjs.appspot.com/dynamic-images/1024px-wright-flyer.jpg">
</noscript>`
4

1 に答える 1

2

jQuery の使用:

$('img').each(
    function(i,el){
        var that = $(el);
        $('<img />').attr('data-src', el.src).insertBefore(el);
        that.wrap('<noscript />');
    });

JS フィドルのデモ。

または、少し異なります：

$('img').each(
    function(i,el){
        $(el).wrap('<noscript />').clone().insertBefore(el.parentNode).data('src', el.src).removeAttr('src');
    });​

JS フィドルのデモ。

を追加するように調整class:

$('img').each(
    function(i,el){
        $(el).wrap('<noscript />').clone().insertBefore(el.parentNode).data('src', el.src).removeAttr('src').addClass('newClass');
    });​

JS フィドルのデモ。

ただし、前述のように、noscriptはまったく不要であり、JavaScript を使用して画像を調整することもできます (JavaScript が無効になっている場合、画像は変更されないため)。

$('img').each(
    function(i,el){
        $(el).attr('data-src', el.src).removeAttr('src').addClass('newClass');
    });​

JS フィドルのデモ。参考文献:

于 2012-11-01T11:46:26.983 に答える