イメージの読み込みを中止する方法

私は消費されたトラフィックの量を減らそうとしています。そのため、不要な画像の読み込みをキャンセルする必要があります。私はすべてではない、いくつかの画像の読み込みをキャンセルしようとしているので、私はこの方法イメージの読み込みを中止する方法

window.stop();

を使用することはできません私は、空の文字列値

に不要な画像のSRCを置き換えるためにしようとしていたとして、

img.src = '';

しかし、それはChromeとオペラとSTIでだけで動作します画像の少なくとも一部（画像サイズ全体の数kb）をロードしようとします。これは解決策ではありませんが、消費されるトラフィックの量を減らすのに役立ちます。しかし、この解決策は、FirefoxとSafariには適していません。また、私は小さいサイズ（1キロバイト以下）で

img.src = '1px.png';

を変更しようとしていたが、それはまだ解決策ではありません。

また、HTMLから要素を削除しようとしました。

img.parentNode.removeChild(img);

このコードは、単にHTMLから要素を削除するのに役立ちますが、イメージがロードを続けています。

すべてのブラウザで機能し、画像の読み込みを完全にキャンセルする効果的なソリューションはありますか？

出典

2017-10-07 zhuravlyov

[すべてについての画像遅延ロード]（https://www.google.com/search?q=image+lazy+：それから私は私のHTMLでこれを持っていますloading＆rlz = 1C5CHFA_enBD695BD695＆oq = image + laz＆aqs = chrome.0.69i59j69i57j69i60l3j0.2349j0j7＆sourceid = chrome＆ie = UTF-8） –

私は多くの遅延ロードについて知っています。しかし、それは解決策ではありません。問題は画像の読み込みを中断/中止する方法です。 – zhuravlyov

画像を一切読み込まず、必要に応じてロードする（遅延読み込み）、同じではないのですか？ –

-1

うまくいけば、私は助けることができます....

私はあなたがまだ以下試したhaventは気づい：

...

$(document).ready(function() { 
    $("img").removeAttr("src"); 
});

それともあなたがしよう（と自分の画像のURLへのURLを変更する）でした

$(document).ready(function(){ 
    $('img[src*="image.com/img.png"]';) 
});

新しいアイデア（私はhereから得たこと）：

1）イメージのAJAXリクエストを開始し、成功するとイメージはブラウザのキャッシュに送られ、 'src'属性を設定すると、イメージはキャッシュから表示されます。

2） XHR

は、私は（それが実際には画像を返し、その後、20秒待機）巨大画像のダウンロードをエミュレートする特急と小さなサーバーを書きました。

<!DOCTYPE html> <html> 
    <head> 
     <style> 
      img { 
       width: 469px; 
       height: 428px; 
       background-color: #CCC; 
       border: 1px solid #999; 
      } 
     </style> 
    </head> 

    <body> 
     <img data-src="./img" src="" /> 
     <br /> 
     <a id="cancel" href="javascript:void(0)">CANCEL</a> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
     <script> 
      $(function() { 
       var xhr, img = $('img'), src = img.data('src'); 

       xhr = $.ajax(src, { 
        success: function (data) { img.attr('src', src) } 
       }); 

       $('#cancel').click(function(){ 
        xhr.abort(); 
       }) 
      }); 
     </script> 
    </body> </html>

希望に役立ちます:)

出典

2017-10-07 02:10:51 Jesus

解決策ではありません。画像はまだロードされています。 – zhuravlyov

@zhuravlyov私は可能な3番目の解決策を追加しました:) – Jesus

XMLHttpRequestも解決策ではありません。 – zhuravlyov

イメージの読み込みを中止する方法

答えて

関連する問題