4

モバイル デバイスの効率を最大化するために、デスクトップ バージョンに使用される画像は使用しないほうがよいでしょう。調査の結果、単にdisplay:none;css を使用するかjQuery('img').hide()、画像を非表示にするだけで、リソースを使用して画像をロードすることがわかりました。

どうすればこれを取ることができますか：

<div class="com_router_img">
<img src="http://www.example.com/wp-content/uploads/2013/05/img.jpg"
 alt="img" width="700" height="350" class="aligncenter size-full wp-image-307" />
</div>

そして、モバイルスタイルシートに表示しませんか? モバイル スタイルシート クエリは次のとおりです。

<link rel="stylesheet" media='screen and
 (-webkit-min-device-pixel-ratio: 1.4) and (-webkit-max-device-pixel-ratio: 1.5)'
 href="<?php bloginfo('template_url'); ?>/smallphone.css" />
4

3 に答える 3

6

このレベルの最適化が必要な場合は、CSS を介して画像を背景画像として使用するのが一般的です。モバイル ブラウザーは、適用する CSS のみを読み込みます。

CSS

<style>
@media (max-width:600px) {
   .image {
      display:none;
   }
}
@media (min-width:601px) {
   .image {
      background-image: url(http://www.example.com/wp-content/uploads/2013/05/img.jpg);
      width:700px;
      height:350px;
   }
}
</style>

HTML

<div class="image">

</div>
于 2013-09-17T19:22:23.960 に答える
0

画像が読み込まれないようにするために、remove()オブジェクト関数を使用imgしてコードからタグを削除できます。

$('img').remove();

または、属性を削除することもできsrcます。注: 定義されている場合は幅や高さなどの CSS 値があり、コード内に場所があります。

$('img').removeAttr('src');
于 2013-09-17T19:23:26.837 に答える