如何中止圖像加載

我試圖減少消耗的流量。這就是爲什麼我必須取消加載不必要的圖像。正如我試圖取消幾張圖片，並非所有的加載，所以我不能使用方法如何中止圖像加載

window.stop();

我試圖取代不必要的圖像的SRC空字符串值

img.src = '';

但它只是在Chrome和Opera和STI將嘗試加載至少部分圖像（整個圖像大小的幾kb）。這不是一個解決方案，但它仍然有助於減少消耗的流量。但是這個解決方案對Firefox和Safari來說並不好。我也試圖改變

img.src = '1px.png';

具有體積小（1KB或更小），但它仍然不是一個解決方案。

此外，我試圖從HTML中刪除元素。

img.parentNode.removeChild(img);

此代碼可以幫助剛剛從HTML刪除元素，但圖像是繼續加載。

是否有任何有效的解決方案，適用於所有瀏覽器，並完全取消圖像加載？

來源

2017-10-07 zhuravlyov

[所有關於圖像延遲加載（https://www.google.com/search?q=image+lazy+裝載＆RLZ = 1C5CHFA_enBD695BD695＆OQ =圖像+ LAZ＆AQS = chrome.0.69i59j69i57j69i60l3j0.2349j0j7＆的SourceID =鉻＆即= UTF-8）。 –

我知道懶惰加載了很多。但這不是一個解決方案。問題是我如何取消/中止圖像加載。 – zhuravlyov

然後根本不加載圖像並加載（如果需要）（懶加載），是不是相同？ –

-1

希望我能幫助....

我注意到你還沒有試過以下尚未：

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

或者你可以嘗試（並更改網址到圖像URL）...

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

一個新的想法（我從here了）：

1）啓動對圖像的AJAX請求，如果成功，圖像將進入瀏覽器緩存，並且一旦您設置了'src'屬性，圖像就會從緩存中顯示出來

2）您可以放棄XHR

我寫了一個小型服務器，用快速模擬巨大的圖像下載（它實際上只是等待20秒，然後返回一個圖像）。然後，我有這在我的HTML：

<!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我已經添加了一個可能的第三個解決方案，應該工作:) – Jesus

XMLHttpRequest也不是一個解決方案:(因爲我們有一個靜態HTML src值在它:( – zhuravlyov

如何中止圖像加載

回答

相關問題