1

I'm trying to reduce the amount of consumed traffic. That's why I have to cancel loading of unnecessary images. As I'm trying to cancel loading of few images, not all, so I can't use method

window.stop();

I was trying to replace SRC of unnecessary images to empty string value 

img.src = '';

But it works just in Chrome and Opera and still trying to load at least part of the image (few kb of the whole image size). This is not a solution, but still it helps to reduce the amount of consumed traffic. But this solution is not good for Firefox and Safari. Also I was trying to change 

img.src = '1px.png';

with a small size (1kb or less) but it is still not a solution.

Also I tried to remove element from HTML.

img.parentNode.removeChild(img);
This code helps just to remove elements from HTML but images are continue loading.

Is there any effective solution that works in all browsers and completely canceled the image loading?

zhuravlyov
  • 483
  • 2
  • 10
  • [All about image lazy-loading](https://www.google.com/search?q=image+lazy+loading&rlz=1C5CHFA_enBD695BD695&oq=image+laz&aqs=chrome.0.69i59j69i57j69i60l3j0.2349j0j7&sourceid=chrome&ie=UTF-8). – The Alpha Oct 07 '17 at 01:36
  • I know about lazy loading a lot. But it's not a solution. The question was in how can I cancel/abort image loading. – zhuravlyov Oct 07 '17 at 01:38
  • Then don't load images at all and load if needed (lazy-loading), isn't it same? – The Alpha Oct 07 '17 at 01:39
  • 1
    Nope it's not the same. If I have a static html with many images and I can't change it at all lazyloading is not a solution. I'll repeat that I'm looking for how can I cancel/abort image loading. That's my question. – zhuravlyov Oct 07 '17 at 01:45
  • Possible duplicate of [Cancel single image request in html5 browsers](https://stackoverflow.com/questions/4926215/cancel-single-image-request-in-html5-browsers) – Guillaume Georges Jul 03 '18 at 13:39

2 Answers2

0

I think this is a Firefox network throttling problem when you decrease the speed of your network. You must check it with real slow network.

You can use img.src =''; in Firefox too.

When you speed down network with throttling, Firefox will download the image with real speed but show download progress with low speed and when you want to cancel it in the middle of download, you can't do it because image was loaded before.

Morne
  • 1,541
  • 1
  • 16
  • 31
AliReza
  • 1
  • 2
-1

I noticed you haven't tried the following yet:

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

Or you could try (and change the url to your image url):

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

A new idea (that I got from here):

1) initiate an AJAX request for the image, if it succeeds, the image goes to the browser cache, and once you set the 'src' attribute, the image is shown from the cache

2) you can abort the XHR

I wrote a tiny server with express emulating the huge image download (it actually just waits 20 seconds, then returns an image). Then I have this in my 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>
halfer
  • 18,701
  • 13
  • 79
  • 158
A Friend
  • 1,118
  • 10
  • 20