6

javascript on dom ready を使用して画像の読み込みを停止し、必要なときにいつでも読み込みを開始しようとしています。これは、いわゆる画像の遅延読み込みです。このようなもの：


$(document).ready(function () {
  var images = $('img');
  $.each(images, function() {
    $(this).attr('src', '');
  });
});

これは機能しません (ff3.5、safari 3-4 でテスト済み)。とにかく画像が読み込まれていますが、わかりません。

たとえば、このプラグイン www.appelsiini.net/projects/lazyload はまったく同じことを行っており、ページの読み込み時に src 属性を削除しています。

私は何が欠けていますか？

編集: ここにテスト ページを追加しました: http://dev.bolmaster2.com/dev/lazyload-test/ 最初に src 属性を完全に削除し、5 秒後に元の画像を追加します。まだ動作しません。少なくとも、firebug は画像が開始時に読み込まれると言っていますが、firebug は信頼できますか?

4

9 に答える 9

4

removeAttr("src"); を試してください。http://www.appelsiini.net/projects/lazyloadのように

$(document).ready(function () {
  var images = $('img');
  $.each(images, function() {
    $(this).removeAttr("src");
  });
});

それでもうまくいかない場合。this.loaded を確認してください - 読み込みが速すぎる可能性があります。

于 2009-08-27T09:25:01.323 に答える
1 
$(document).ready(function () {
    var images = $('img');
    $.each(images, function() {
        $(this).attr('src', '');
    });
});

ページが次の場所に読み込まれた後にjQueryが呼び出されるため、これは機能しません。

$(document).ready()

このコードが実行するのは、イメージがサーバーからすでに呼び出された後でsrc値を削除することだけです。

于 2011-07-05T20:38:07.997 に答える
1

問題は、「src」ではなく「img」属性を空にしていることだと思います。

これをローカル ページでテストしている場合、ローカル イメージの読み込みが速すぎる可能性があります。または、ブラウザのキャッシュから直接取得されている可能性があります。「src」を空にする前に、イメージがすでにロードされているかどうかを確認してください。

于 2009-08-27T09:25:19.793 に答える
0

JavaScript を使用すると、次のようになります。

var imagesArray = document.querySelectorAll('img');

for(var i=0; i<imagesArray.length; i++) {
    imagesArray[i].src = '';
}

最初にバニラ Javascript を使用することを検討してください。

于 2014-09-17T06:41:51.227 に答える
0

質問に間違って書いたかどうかはわかりませんが、空の文字列に設定する必要がある属性は「img」ではなく「src」です。これを試して：

$(document).ready(function () {
  var images = $('img');
  $.each(images, function() {
    $(this).attr('src', '');
  });
});
于 2009-08-27T09:26:37.983 に答える
0

サムネイル画像のホバーイベントに画像をロードすると、同じ問題が発生しました.IEでは、サムネイル画像にカーソルを合わせると「スタックオーバーフロー」が発生します。
しかし、それは現在解決されています。このコードは私の日を救った：

$(document).ready(function() {
  var images = $('img');
  $.each(images, function() {
    $(this).removeAttr("src");
  });
});
于 2011-04-16T04:19:19.550 に答える
0

あなたの問題は、ドキュメントの準備ができたときに呼び出される $(document).ready 内でコードを実行していることだと思います。画像を含めて完全にロードされたとき。リンク先の LazyLoad プラグインは $(document).ready を使用せず、スクリプトはヘッダーに配置されるため、ページの読み込み後ではなく読み込み前/読み込み中に実行されます。

于 2009-08-27T09:51:50.210 に答える
0

これには Jquery Lazyload プラグインを使用することをお勧めします。それはまさにあなたが望むことをします。

http://www.appelsiini.net/projects/lazyload

于 2010-07-28T21:49:44.947 に答える