0

ウェブサイトをモバイルフレンドリーにしようとしています。手順の 1 つは、広告と重要でないデータを含む右側の列を非表示にすることです。CSSには、次のようなものがあります。

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

問題は、右側の列に広告を表示するための JavaScript が含まれていることです。これは引き続き実行されます。これには 2 つの理由があります。1. ページの読み込みが遅くなります。2. 広告ネットワークの TOS に違反している (訪問者に広告が表示されなくても、ビューがまだ登録されているため)

非表示の列のコードが実行されないようにするにはどうすればよいですか?

追加するために編集: これは、無効にする必要がある JavaScript コード ブロックの 1 つです。

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

3 に答える 3

0

$(window).width()チェック付きのjQueryをお勧めします。$(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]');
    }
});
于 2013-11-01T04:30:16.603 に答える
0

いいえ、ページにコードを記述した場合、コードのロードを防ぐことはできません。DOM が準備完了状態のときに Javascript/Jquery コードがレンダリングされるためです。

プロパティをチェックすることで、コードブロックの実行を防ぐことができvisibilityます。

そのように：

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

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

ページのパフォーマンスを向上させたい場合は、JavaScript をページの上部ではなく下部に移動します。

これを読む

実際の例を見る

于 2013-11-01T04:46:08.487 に答える