6

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

HungryCoder
  • 7,506
  • 1
  • 38
  • 51
AMD
  • 1,278
  • 4
  • 15
  • 33
  • possible duplicate of [Prevent images from loading](http://stackoverflow.com/questions/1667868/prevent-images-from-loading) – Peter O. Nov 02 '12 at 11:47

5 Answers5

5

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.

Echilon
  • 10,064
  • 33
  • 131
  • 217
nkamm
  • 627
  • 5
  • 14
  • Awesome, thanks for this. Exactly what I was looking for to stop all resource loads when an overlay is closed before all content is loaded. – jmiraglia Sep 08 '17 at 17:27
4

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(); 
});
Harry B
  • 2,864
  • 1
  • 24
  • 44
HungryCoder
  • 7,506
  • 1
  • 38
  • 51
  • Is the selector working? Try `$('img[src="http://image.com/img.png"]')` in Console to see if any image element is returning. Otherwise, update your question with the whole image tag that is generated. – HungryCoder Nov 02 '12 at 10:13
  • I wrote $('img[src="http://image.com/img.png"]') in console and no image returned – AMD Nov 02 '12 at 10:18
  • is there any .stoploading, .stop – AMD Nov 02 '12 at 10:19
  • I have no image tag, it is just loaded (it's not placed on my html) – AMD Nov 02 '12 at 10:20
  • is "image.com/img.png" is the full value for the `src` attribute? Otherwise it won't work. If you want partial matching try my updated answer – HungryCoder Nov 02 '12 at 10:23
  • I believe the external js is loading image after your js is executed, in that case look for my answer – Atif Nov 02 '12 at 10:23
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?

Raohmaru
  • 140
  • 5
  • I cant understand "it worth cancel all other downloads in your page?" – AMD Nov 03 '12 at 15:13
  • Sorry, I meant, the method `window.stop()` cancels ALL the active downloads in the page, not only the image you want to stop from loading. So you can accidentaly stop the loading of other resources you really need. – Raohmaru Nov 04 '12 at 12:28
1

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 !

teter
  • 1,468
  • 1
  • 14
  • 19
0
$(window).load(function(){
    $('img[src="http://image.com/img.png"]').remove();
});
Atif
  • 10,623
  • 20
  • 63
  • 96