如何中止图像加载

我试图减少消耗的流量。这就是为什么我必须取消加载不必要的图像。正如我试图取消几张图片，并非所有的加载，所以我不能使用方法如何中止图像加载

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

如何中止图像加载

回答

相关问题