javascript to cancel image loading

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.com/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.com/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 come up with a better solution

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

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

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)