Question

我正在尝试减少消耗的流量。这就是为什么我必须取消加载不必要的图像。因为我试图取消加载少量图像，而不是全部，所以我不能使用方法

window.stop();

我试图将不必要图像的SRC替换为空字符串值

img.src = '';

但它仅适用于Chrome和Opera，并且仍在尝试加载至少部分图像（整个图像大小的kb）。这不是一个解决方案，但它仍然有助于减少消耗的流量。但是这个解决方案对Firefox和Safari来说并不好。我也试图改变

img.src = '1px.png';

小尺寸（1kb或更小），但它仍然不是解决方案。

我还试图从HTML中删除元素。

img.parentNode.removeChild(img);

此代码有助于从HTML中删除元素，但图像将继续加载。

是否有适用于所有浏览器的有效解决方案并完全取消了图像加载？

Answer 1

当您降低网络速度时，我认为这是Firefox网络节流问题。您必须使用真正的慢速网络进行检查。

您可以使用 img.src =''; 在Firefox中也是如此。

当您通过节流来降低网络速度时，Firefox会以实际速度下载图像，但会以低速显示下载进度，并且当您要在下载过程中取消图像时，您将无法执行此操作，因为图像是在加载之前

Answer 2

我注意到你还没有尝试过以下方法：

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

或者您可以尝试（并将网址更改为您的图片网址）：

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

一个新想法（我从here获得）：

1）启动对图像的AJAX请求，如果成功，则图像进入浏览器缓存，并且一旦设置了＆＃39; src＆＃39;属性，图像从缓存中显示

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>

如何中止图片加载

2 个答案: