1 
<script type="text/javascript">
  $(window).resize(function(){
  var width = $(window).width(); 

   if (width < 361) {
      $(".infograph-image").attr("src","/images/infographicHowMobile.png");
   }
 }); 
</script>

ビューポートの幅のサイズに基づいて、特定の画像の画像ソースを変更したいと考えています。ビューポートの幅のサイズが 360 以下の場合は、モバイル バージョンの画像に変更します。

2 つの簡単な質問があります。

1）次の両方を行うにはどうすればよいですか：a）ウィンドウのサイズ変更とドキュメントの準備を検出しますか？

これは、私が得たと思います：

それを関数に変更する必要があります。次に、ロード時に呼び出します。

checkResponsive();

次に、イベント リスナーをバインドします。

    

$(window).resize(checkResponsive);

2) モバイル版が必要な画像がいくつかありますが、これを関数に変換する必要がありますか? または、いくつかのifが機能する可能性がありますか?

この 2 つの質問のキックオフ スタートを教えてください。

4

1 に答える 1

1

別の関数を作成し、両方のイベントで呼び出します。したがって、たとえば、次のように関数 mobileImg() を作成します。

function mobileImg(targetClass, imageSrc) {
    var width = window.innerWidth; // No need for jQuery here, raw JS can do this

    if(width < 361) {
        $(targetClass).attr("src", imageSrc);
    }
}

そして、両方のイベントでこれを呼び出します。

$(document).ready(mobileImg(".infograph-image", "/images/infographicHowMobile.png"));
$(window).resize(mobileImg(".infograph-image", "/images/infographicHowMobile.png"));

その後、必要に応じてメソッドを呼び出すことができ、mobileImg任意のパラメーターを使用できます。本当にきれいにしたい場合は、渡された要素と画像が存在するかどうかのチェックも追加し、必要に応じてフォールバックを使用します。

于 2012-10-08T15:30:03.870 に答える