Javascript stop image loading

Question

I'm making a website and one of pages is using a javascript file from an external site

That external js contains (in fact loads) an image that I don't need on my page.

How do I stop that image from loading (let's say the img url is "http://image.com/img.png")? Is there any javascript code that could do it?

Thanks to all of you

Answer 1

Once DOM is loaded stop downloading any of resources (window.stop() for modern browsers, document.execCommand("Stop", false) for IE). Then find resources you are required in and ask browser to download them.

Answer 2

You can select the image with the URL and remove it from DOM

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

Update 1:

As you probably wanted partial matching, try this one:

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

Answer 3

You cannot cancel a download of a single resource with JavaScript. As @nkamm answered, you could invoke the window.stop() method, but then it stops downloading any of resources (like pressing the "stop" button in the browser).

If the image you try to stop downloading will not be rendered in the DOM, it worth cancel all other downloads in your page?

Answer 4

The only way to have full control over it is WebWorkers.

Basically you create a xhr.worker.js that has only a HTTP request to load the image (receives the URL via a message).

After he loads the image, the image will be in the browsers cache so you just need to set the src='' to the image URL to show it.

If you kill the specific webworker, the image loading will be canceled too !