CODEWITHSUNDEEP
javascriptdomdom-events
Sahil Goyal
Sahil Goyal

Reputation: 1

How can I block images using js only?

I want to block all the images of any web page to lower the page loading time, consider the web page source code is loaded into browser but the documents/files still needed to be downloaded, is there any event to cover this problem?

I think can method must be followed in browsers text only mode.

Upvotes: 0

Views: 2975

Answers (4)

ajay92x
ajay92x

Reputation: 73

You can remove the whole img tag

$("img").remove();

or you can just remove the image tag source attribute

$("img").removeAttr("src");

or you can just replace all the image source having shorter loading time

$("img").attr("src",'http://someimage.jpg');

Upvotes: 0

mk029
mk029

Reputation: 43

I'm not sure if it solves your problem but maybe you can try this: 

<script type="text/javascript">
    $(document).ready( function() { $("img").removeAttr("src"); } );
</script>

Upvotes: 1

user5014677
user5014677

Reputation: 694

No. If the src tag is already set the browser will Load the images no matter what. Remove the src tag after it was loaded doesn't change the fact that it was already downloaded.

The only way to avoid this is to set the src tags of imgs by Javascript dynamicly. And therefore not set images if you don't want to.

You can't make the browser not loading images if it's already in the html.

Upvotes: 1

bankaujjwal
bankaujjwal

Reputation: 68

<div class="image"><img external-src="original.jpg" src="fake.jpg" /></div>

$(window).load(function(){
  $('.image img').attr("src", $(this).attr('external-src')).removeAttr('external-src');
});

This will load all the images after whole dom loaded

Upvotes: 0

Related Questions