0

元の画像の src 値を指す「data-original」という名前の属性を必要とする Lazy Load を使用したいと考えています。問題なく、次のように src 属性の値を使用して新しい「データ オリジナル」を作成できます。

  $('img.lazy').each(function() {
    a =  $(this).attr("src");
        $(this).attr("data-original", a);
   });

しかし、これに従うと（Lazy Loadにはsrc値が必要です）：

  $('img.lazy').each(function() {
    b =  "img/grey.gif";
        $(this).attr("src", b);
   });

data-original と src atrr は両方とも "img/grey.gif" になります

初心者からありがとう！

4

2 に答える 2

1

両方を同じループに入れることができます。そして、これはおそらくここでは問題ではないとしても、aというグローバル変数を使用していない場合は、通常は「var a=...」を使用する必要があります。

$('img.lazy').each(function() {
   $(this).attr("data-original", $(this).attr("src"));
   $(this).attr("src", "img/grey.gif");
});
于 2012-09-03T17:10:43.930 に答える
1

jQuery メソッドを使用して、DOM 要素の一部の属性を変更することは、セキュリティ上の理由から、一部の (またはすべての) ブラウザーでは許可されていません.attr()。その場合は、次のアプローチを使用できます。

$('img.lazy').each(function() {
    $(this).attr("data-original",$(this).attr("src"));
    $(this)[0].src = "img/grey.gif";
    // or $(this).get(0).src = "img/grey.gif";
});

[編集]

順番を入れ替えました：

$('img.lazy').each(function() {
    var src = $(this).attr("src");
    // assign the initial src value to temp var
    $(this)[0].src = "img/grey.gif";
    // or $(this).get(0).src = "img/grey.gif";
    $(this).attr("data-original",src);
});

私はレイジーロードに慣れていません。属性値を変更するのではなく、要素を置き換える可能性があります。その場合は、別の道を歩む必要があります。

[編集終了]

ただし、それがあなたの問題かどうかはわかりません。

于 2012-09-03T17:23:58.560 に答える