HTML, CSS, Javascript: prevent execution of javascript in non-displayed elements

Question

I'm trying to make a website mobile-friendly. One of the steps is to hide the right column, which has ads and non-essential data. In the CSS, I have something like this:

@media only screen {
    @media handheld or (max-width: 768px) {
        #column_right {display:none}
    }
}

The problem is that the right column contains javascript to display ads, which will still be executed. This is bad for 2 reasons: 1. It slows down the loading of the page. 2. It is against the ad networks' TOS (because the view is still registered, even though the visitor doesn't see an ad)

How would I prevent the code in the hidden column from being executed?

Edited to add: Here is one of the javascript code blocks that I need to disable:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- removed ad block name -->
<ins class="adsbygoogle"
     style="display:inline-block;width:160px;height:600px"
     data-ad-client="removed"
     data-ad-slot="removed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Answer 1

If you're using jQuery you could check if the element is visible. http://api.jquery.com/visible-selector/

Answer 2

I'd suggest jQuery with a $(window).width() check. You can call this on $(document).ready() as well as listen for $(window).resize().

If you're listening for the resize, you of course want to do something like:

var MAX_WINDOW_WIDTH = 768;

checkWindowSize();

$(window).resize(checkWindowSize);

function checkWindowSize(){
    if ($(window).width() < MAX_WINDOW_WIDTH && $('#column_right').size() > 0){
        $('#column_right .ad-block').remove();
    }
    if ($(window).width() > MAX_WINDOW_WIDTH && $('#column_right').size() == 0){
        $('#column_right').append('[some HTML ad code here]');
    }
});

Answer 3

No you can not prevent to load a code if you write it on page. Because Javascript/Jquery code is render when DOM in ready state.

You can prevent execution of code-block, by checking the visibility property.

Like that:

var theCSSprop = getComputedStyle( document.querySelector("#column_right") ).visibility

if(theCSSprop != "hidden"){
  // write your code which you want to prevent 
}

If you want to improve page performance than move JavaScript to the bottom of the page instead of putting them in the head/top.

Read This

See live example