Is there a way to prevent img get requests from occurring using css or js?

Question

If I can only use css and/or javascript, is there a way I can prevent a get request to an image from happening?

like this:

<img src="A.png"/>

img {
    src:none;
}

And this will prevent the GET request to A.png when the page loads.

Does anyone know if this is possible?

Thanks

You can't set HTML attributes via CSS of course. The most you can do here with CSS, is set the image to display:none (and maybe width and height to 0 as well), but you must ensure that this CSS gets _applied_ before the browser encounters the img element. — CBroe, May 18 '16 at 17:55
Why exactly do you need it? You can have `data-src` set,that won't send the request. Then when you actually need to call the request, you set the `src` from `data-src` — Suthan Bala, May 18 '16 at 17:55
Have a look at [Does “display:none” prevent an image from loading?](http://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading) — Andy Hoffman, May 18 '16 at 17:56
The above is just pseudocode to show what I want. Also I can't modify the html, I can only put in my css/js. — omega, May 18 '16 at 17:58
@AndyHoffman The answers there give contradicting results. Do you know if it will load in IE11 (ie 10 rendering mode) or chrome 49? — omega, May 18 '16 at 18:00
Here's a test with browser behavior re loading assets. It's outdated but may be an interesting read: https://timkadlec.com/2012/04/media-query-asset-downloading-results/ — yezzz, May 18 '16 at 18:24

Trevor Nestman · Answer 1 · 2016-05-18T19:31:23.330

I feel like this should work for what you're looking for:

<script>
    $(document).ready(function () {
        $("img").attr("src", "");
    });
</script>

It should replace the src attributes in all <img> tags. You could also remove the src attribute with $("img").removeAttr("src").

Something similar in javascript would be:

<script>
    document.addEventListener("DOMContentLoaded", function (event) {
        var images = document.getElementsByTagName("img");
        for (var i = 0; i < images.length; i++) {
            images[i].setAttribute("src", "");
        }
    });
</script>

Like in jquery, you can use images[i].removeAttribute("src") to remove the html src attribute altogether.
Both of these scripts are at the bottom of my html.
I don't know if this is exactly what you're looking for, but hopefully this helps.

score -1 · Answer 2 · answered May 18 '16 at 18:09

there is a javascript way:

giving no source to img initially (= not doing a request) and changing it source via javascript afterwards

if you want to enter the URLs of the image in the dom use data-src attribute as ISuthan Bala mentioned

<img data-src="my-image.png" />

Easy setting data-src to src via jQuery for example

Is there a way to prevent img get requests from occurring using css or js?

2 Answers2