I am looking for a way to cancel image loading using javascript. I've looked at other questions and hiding them is not enough. Also, the rest of the page must load (window.stop() is out of the question).

The page that is being loaded is not under my control, only one thing is guaranteed - the first <script> on the page is my javascript (lightweight - no jquery).

I have tried setting all img sources to nothing, that did not help since the dom is created after the page is parsed, and all browsers have the same behavior - the img is loaded once it is parsed.

I am looking for a way to cancel image loading using javascript. I've looked at other questions and hiding them is not enough. Also, the rest of the page must load (window.stop() is out of the question).

The page that is being loaded is not under my control, only one thing is guaranteed - the first <script> on the page is my javascript (lightweight - no jquery).

I have tried setting all img sources to nothing, that did not help since the dom is created after the page is parsed, and all browsers have the same behavior - the img is loaded once it is parsed.

• javascript
• dom

• 2 @John "I have tried setting all img sources to nothing, that did not help since the dom is created after the page is parsed, and all browsers have the same behavior - the img is loaded once it is parsed" – thescientist Commented Dec 25, 2012 at 14:02
• See this: stackoverflow./questions/4926215/… :-) – Ionică Bizău Commented Dec 25, 2012 at 14:02
• Hi John. Already looked at that answer but it seemed, if I understnad correctly, that in order to have a hidden iframe I have to control the source html – daniel_or_else Commented Dec 25, 2012 at 14:07

7 Answers 7

Not possible with modern browsers. Even if you alter the src attribute of image tag with JavaScript browsers still insist on loading the images. I know this from developing the Lazy Load plugin.

The only way I can see to stop images loading is to not have an src attribute present in the image itself, and using a custom data-* attribute to hold the location of the image:

<img data-src="http://path.to/image.png" />

Obviously this doesn't gracefully degrade for those (admittedly rare) JavaScript disabled browsers, and therefore requires a noscript fall-back:

<img data-src="http://path.to/image.png" />
<noscript><img src="http://path.to/image.png" /></noscript>

And couple this with a simple function to load the images when you, or your users, are ready for them:

/* simple demo */
function imagePopulate(within, attr) {
    within = within && within.nodeType == 1 ? within : document;
    attr = attr || 'data-src';
    var images = within.getElementsByTagName('img');
    for (var i = 0, len = images.length; i < len; i++) {
        if (images[i].parentNode.tagName.toLowerCase() !== 'noscript') {
            images[i].src = images[i].getAttribute(attr);
        }
    }
}

document.getElementById('addImages').onclick = function(){
    imagePopulate();
};

JS Fiddle demo.

I can't be sure for all browsers, but this seems to work in Chrome (in that there's no attempt, from looking at the network tab of the developer tools, to load the noscript-contained img).

It can be done with webworkers. See the following example: https://github./NathanWalker/ng2-image-lazy-load.

Stopping a web worker cancels the image loading in browser

Recalling the onload event:

window.onload=function(){
imgs = document.getElementsByTagName('img');

for(i = 0; i < imgs.length(); i++){
imgs[i].src = '#';
}
};

If you want to only cancel the loading of the image , you can use sємsєм's solution but i do not think it will work by using an window onload event .

You will probably need to provide a button to cancel the image load. Also i suggest, instead of setting the src attribute to "#" , you can remove the src attribute itself using removeAttribute()

[Make sure you disable the cache while testing]

You need a proxy.

Your script can redirect to another server using something like

location.replace('http://yourserver./rewrite/php?url='+escape(this.href));

perhaps you tell us why you want to cancel image loading and whose site you are loading on so we can e up with a better solution

If there is nothing on the page other than images, you could try

document.write('<base href="http://yourserver./" />');

which will mess with all non-absolute src and hrefs on the page.

UPDATE Horrible hack but perhaps this almost pseudo code (I am off to bed) will do someting

document.write('<script src="jquery.js"></script><div id="myDiv"></div><!-'+'-');
$(function() { 
  $.get(location.href,function(data) {
    $("#myDiv").html(data.replace(/src=/g,'xsrc='));
  });
})

The closest you can get to what you maybe want is to have a quickly loaded placeholder image (ie. low resolution version of your image) and a hidden image (eg. {display:none}) in which the large image gets loaded but not displayed. Then in the onload event for the large image swap the images over (eg. display:block for the large image display:none for the smaller). I also use an array (with their url), to reuse any images that have already been opened.

BTW if you open an image in a new webpage when it gets closed then the image loading will be cancelled. So maybe you can do something similar in a webpage using an iframe to display the image.

To close the iframe and therefore unload the image, remove the frame from the DOM

(another advantage is that browsers spawn another process to deal with iframes, so the page won't lock up while the image loads)