2

大きな画面用の img と小さな画面用の img があります。これは簡単なオプションであり、うまくいくかどうかはわかりませんが、同じ img を html に異なるサイズで配置し、ディスプレイで非表示にすることをお勧めします。なし？そのオプションに他の問題はありますか？

CSS:

#small {
    display:none;
}

@media screen and (max-width: 630px) { 
#big { display:none; }
#small { display:block; }
}

HTML:

<img id="big" src="img/1-big.jpg">
<img id="small" src="img/1-small.jpg">
4

2 に答える 2

1

これには何も問題はありません。実際、ページの読み込み時間を短縮し、モバイルでページのサイズを抑える手法として認識されています (もちろん、デバイスのサイズに必要な画像のみを読み込む場合)。

また、これに関して私が見ることができる唯一の潜在的な落とし穴として、単に CSS プロパティを に設定するだけでdisplay: noneは必ずしも画像の読み込みが妨げられるわけではないことに注意してください (こちらを参照してください: Does "display:none" prevent an image from loading? )

これに代わる方法は、同じ名前で画像を保存し、接尾辞を小さくするか、接尾辞を付けずに (大きな画像の場合) 追加することです (例のように)。時間を確認し、javascript を使用してパスを変更します。例;

// HTML ELEMENT
<img class='thumbnail' src='img/thumb.png'>

// JAVASCRIPT
if(window.innerWidth < 640){
  // This is for users with smaller screens, load the smaller image
  var imgs = document.getElementsByTagName('img');

  for(var i = 0; i < imgs.length; i++){
    var current = imgs[i].getAttribute('src');
    imgs[i].setAttribute('src', current + '-small.png');

    // THIS WOULDN'T WORK AS IS, AS IT WOULD PRODUCE '.png-small.png' 
    // AND IS INTENDED **ONLY** TO ILLUSTRATE A CONCEPT
  }
}
于 2016-03-23T15:30:31.897 に答える