javascript/jqueryで画像が読み込まれないようにする方法はありますか？私は画像付きのHTMLリストからスライドショーを作成しています。だから、私はすべてのsrcデータを収集し、画像が読み込まれないようにしたいと思います。だから後でユーザーが実際にイメージを必要とするとき、私はそれをロードします。画像が読み込まれないようにする
私はローグスクリプトをGoogleで見つけましたが、画像が読み込まれないようにする方法が見つかりませんでした。
ありがとうございます。
EDIT1：
ロードからイメージを防ぐために、JavaScriptを使用することはできませんという答えかららしいです。 Hereは、遅延読み込みを実行するスクリプトです。誰でもどのように動作するのか説明できますか？それはjavascriptがオフになったときに画像が正常にロードされ、その位置にスクロールすると画像がロードされるように見えます。
ページ上にHTMLをレンダリングすると、非表示になっても読み込まれます。画像が必要なときにのみ読み込まれるようにするには、javascriptの画像タグにソース（src）を動的に設定する必要があります。
編集1：あなたは単にあなたがページを下にスクロールしてきたどのくらいかをチェックして、そのトップチェックすることにより、目に見える（またはほとんど見え）である画像を決定する参照スクリプト - $の.belowthefoldを参照し、 $ .rightoffold拡張機能。
この例は、画像のサイズが同じでもコンテナのサイズが同じで、レイジーロード時に奇数ページのサイズ変更の動作が発生しないため、画像がすべて同じサイズの場合に効果的です。画像の高さと幅が異なる場合は、奇妙な結果が生じることがあります。
編集2：
http://home.langdonx.com:8000/demos/js/prevent_loading.html
<script type="text/javascript" charset="utf-8">
$(document).ready(function() { $("img").removeAttr("src"); });
</script>
<img src="Chrysanthemum.jpg" />
<img src="Desert.jpg" />
<img src="Hydrangeas.jpg" />
<img src="Jellyfish.jpg" />
<img src="Koala.jpg" />
<img src="Lighthouse.jpg" />
<img src="Penguins.jpg" />
<img src="Tulips.jpg" />
しかし、このスクリプトの画像を読み込むのを防ぐ必要はありませんか？私が火かき棒でチェックすると、GET画像をスクロールすると元の位置にスクロールするので、最初にローディングを停止する仕組みが必要ですか？ – Pickels
申し訳ありませんが、元のキューのサイトを失ったstion。あなたの答えは次のようになります： $（self）.removeAttr（ "src"）; self.loaded = false; – Langdon
$（ "img"）。removeAttr（ "src"）。css（ 'display'： 'none'）; IMG要素のSRC属性がない場合、いくつかのブラウザ（Firefox）が壊れた小さなアイコンを表示するため、より良いかもしれません。 – Wells
URLを別の場所に保存してから、すべての画像URLをダミー画像（空、透明、「データ読み込み...」など）に設定します。イメージを表示するときは、JSを使用してsrc属性を設定し、ブラウザがそれを取得します。
あなたのウェブサイトでいくつかのSEOを行う必要があるときには、適切な画像が表示されていないと正しく索引付けされていません。 'src'。 – Eranda
@Erandaロボットに適した別のページへのインデクサーロボットを指し示す –
ちょうどあなたがそれを必要とDHTMLを使用して、その場でそれを生成し、元のHTMLにimgタグが含まれていません。 imgタグに偽のURLを付けて、それを実際のものと動的に置き換えることもできます。
サイドノートで - 何がポイントですか。ここでやろうとしているのは、既存のキャッシュ機構を構築することだけです。ブラウザにキャッシュを残して、これはかなり良いです。
このメカニズムが必要な理由私はスライドショーを作っているからです。したがって、30の画像がある場合、ユーザーが2枚の画像のみを表示する場合は、30枚すべてをロードしたくありません。 – Pickels
以下の部分を使用して、すべてのイメージタグをダミーファイル（たとえば、1x1透明gif）に置き換えることができます。 URLは後で参照できるように配列に格納されています。
$(document).ready(function(){
var images = new Array();
$("img").each(function(i){
images[i] = this.src;
this.src='blank.gif';
});
});
は、あなたがこのような何かを行うことができますまあプロトタイプと私は推測する：
var unloaded = [];
$$('img.noload').each(function (image) {
unloaded.push(image);
image._src = image.src;
image.src = '';
});
は、それらのすべてをロードするには：
unloaded.each(function (image) {
image.src = image._src;
});
は最初のものをロードするには：
function loadImage (image) {
image.src = image._src;
}
loadImage(unloaded.shift());
私はあなたがそのアイデアを得たことを願っています。
私は、あなたが変更される可能性が...
を（あなたはJavascriptが有効になっていない場合、それはあなたのページの遺跡のようになど、スクリーンリーダーを）多くの理由のために、このソリューションをお勧めしますが、その可能性はありませんIMGタグには（あまりにもLONGDESC、またはTITLE）ALTのように、異なる属性を乗っ取るように：
次に、あなたがする必要があるとして、ALT値とSRC属性を更新するためにJavascriptを使用しています。
これは片方向であり、良いことではありません。私は唯一の実際のアプローチは、Javascriptを介して必要に応じて動的に適切なIMGタグを生成し、HTMLで公開しないことです（これも非JSブラウザなどには意味があります）。
noscriptタグ：
<noscript>
<img src="foo.jpg"/>
<noscript>
JavaScriptが有効になっているすべてのブラウザは画像タグを無視して画像が読み込まれないようにします。
確認のために保留中のテストですが、これはすべての中で最も役に立つ回答かもしれません... –
イメージ要素自体のHTMLに変更は必要ありません。これを最善の答えとして投票する。 可能な解決策の1つは '
このarticleは、一連の標準ブラウザでCSSバックグラウンドとimgタグの両方を使用したテストを示しています。
私の個人的な経験では、Scott JehlのPictureFillは、モバイルデバイスの画像の解像度とサイズに対処するためにこれまで使用してきた最高のソリューションです。
私はこれが古い質問であることを知っていますが、私がしたいことを達成する方法を理解するまでにはしばらく時間がかかりました。これはDuckDuckGoの上の結果ですので、ここに投稿する価値があると思います。
この小さなスニペットは、img、埋め込み、およびiframeの読み込みを防ぎ、必要に応じて後で手動で読み込みます。 警告：JQuery/JavaScriptがそれらをキャッチするにはあまりにも速く読み込まれたオブジェクトはまだロードされていますが、スクリプトはまだそれを削除します。 これはロード時間を短縮することを目的としているので、これは問題ではありません。
loadObjects = function() {
/* LOAD OBJECTS */
$("img, embed, iframe").each(function() {
var obj = $(this);
obj.attr("src", obj.data("objsrc")).ready(function() {
obj.fadeIn(1000, "linear").prev(".loading").fadeOut(750, "linear", function() {
$(this).remove();
});
});
});
}
$(document).ready(function() {
/* *** PREVENT OBJECTS FROM LOADING *** */
$("img, embed, iframe").each(function() {
var obj = $(this);
obj.data("objsrc", obj.attr("src"));
obj.hide().attr("src", "").before("<span class=\"loading\"></span>");
});
});
私はあなたの編集に対処するための私の答えを修正しました。 – Langdon
ありがとう、私はあなたの答えをコメントしました。 – Pickels
もう一度修正すると、removeAttr（ "src"）はこのトリックを行うようですが、（a）IMGタグが作成される前にJavaScriptが実行されず、（b）サーバーへのリクエストを作成します（依然として要求は行われているが、キャンセルされている可能性があります）。 – Langdon