HTML、CSS、Javascript：防止在非显示元素中执行Javascript

我正在努力使网站移动友好。其中一个步骤是隐藏右侧列，该列包含广告和非必要数据。在CSS中，我有如下内容：

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

问题是右边的列包含显示广告的javascript，这些广告仍将被执行。这不好有两个原因： 1.这会减慢页面的加载速度。 2.这违反了广告网络的TOS（因为即使访问者没有看到广告，视图仍然被注册）

如何防止执行隐藏列中的代码

编辑添加：以下是我需要禁用的javascript代码块之一：

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

（adsbygoogle=window.adsbygoogle | |[]）.push（{}）；

如果使用jQuery，可以检查元素是否可见

我建议jQuery使用

$（window.width（）

检查。您可以在

$（document.ready（）

上调用此函数，也可以侦听

$（window.resize（）

）

如果您正在收听调整大小，您当然希望执行以下操作：

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

var最大窗口宽度=768；
检查窗口大小（）；
$（窗口）。调整大小（选中窗口大小）；
函数checkWindowsSize（）{
if（$（window）.width（）0）{
$（'#column_right.ad block'）.remove（）；
}
如果（$（窗口）.width（）>最大窗口宽度&&$（'#列右'）.size（）==0）{
$（“#列_right”）。追加（“[此处的一些HTML广告代码]”）；
}
});

不，如果在第页上编写代码，则无法阻止加载代码。因为Javascript/Jquery代码是在DOM处于就绪状态时呈现的

通过检查

可见性

属性，可以防止执行代码块

就像这样：

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

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

如果您想提高页面性能，可以将JavaScript移到页面底部，而不是放在页首/页首

---

广告代码是如何实现的？通过

块或手动通过自己的JS？通过

块。也就是说，正是我从广告网络获得代码的方式。我刚刚添加了这样一个区块的代码（来自谷歌AdSense），我迷路了。。。什么是“div1”？为什么要使用var elem1=document.getElementById（“column_right”）；在那之后我们什么地方都不用它？