javascript to cancel image loading

Question

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.

@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, Dec 25 '12 at 14:02
See this: http://stackoverflow.com/questions/4926215/cancel-single-image-request-in-html5-browsers :-) — Ionică Bizău, Dec 25 '12 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, Dec 25 '12 at 14:07

score 6 · Accepted Answer · answered Dec 25 '12 at 15:27

6

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.

answered Dec 25 '12 at 15:27

Mika Tuupola

19,877
5
42
49

score 1 · Answer 2 · answered Dec 25 '12 at 15:50

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).

Again, there's no control over the html, only javascript – daniel_or_else Dec 25 '12 at 17:28 — daniel_or_else, Dec 25 '12 at 17:28

score 1 · Answer 3 · answered Feb 06 '18 at 09:17

1

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

answered Feb 06 '18 at 09:17

teter

1,468
1
14
19

score 0 · Answer 4 · answered Dec 25 '12 at 14:05

0

Recalling the onload event:

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

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

answered Dec 25 '12 at 14:05

SaidbakR

13,303
20
101
195

1

And how does this stop the images from loading? – mplungjan Dec 25 '12 at 14:07
@mplungjan This will give the same effect. I think he wants to render no images in the page. – SaidbakR Dec 25 '12 at 14:09
Yes, and your code will not kick in until after all images have loaded – mplungjan Dec 25 '12 at 14:10
Tried this ... images are still loaded (look at the debugger's network section) – daniel_or_else Dec 25 '12 at 14:11
@daniel_or_else If this is your condition, you have one theoretical way, I don't know how exactly you could implement, Stop render the page and then call it by AJAX. – SaidbakR Dec 25 '12 at 14:20
sємsєм, this indeed sounds interesting – daniel_or_else Dec 25 '12 at 14:23
I hope that idea is going to help you. – SaidbakR Dec 25 '12 at 14:28

mplungjan · Answer 5 · 2012-12-25T22:26:10.487

0

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='));
  });
})

edited Dec 25 '12 at 22:26

answered Dec 25 '12 at 14:12

mplungjan

169,008
28
173
236

Does it kick in soon enough? – John Dvorak Dec 25 '12 at 14:13
It would likely kick in before any image is loaded – mplungjan Dec 25 '12 at 14:15
Hi, I'm developing a product that is being used by client sites. One of the requirements is that it cannot be 'intrusive' from the client site page point of view. So, the product connects using javascript (which is the only thing the page has to add in order for this product to connect) and hacks the original page. Some of our clients though were keen to notice that the original images are still loaded and here i am ... – daniel_or_else Dec 25 '12 at 14:16
`base href` doesn't affect absolute URLs. – John Dvorak Dec 25 '12 at 14:19

score 0 · Answer 6 · answered Dec 25 '12 at 14:20

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]

ejectamenta · Answer 7 · 2021-12-06T19:09:47.350

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)

javascript to cancel image loading

7 Answers7