4

2 つの異なるサイズの画像があります。1 つは 759 ピクセルより小さい画面用で、もう 1 つは 759 ピクセルより大きい画面用です。

ウィンドウの幅に応じてドキュメントが読み込まれるときに、画像のソースを変更することができました。しかし、ブラウザのサイズも変更されたときにこれを実行できるようにしたいのですが、私の人生ではそれを行うことができません。ページが最初にロードされたときにのみ機能するようです。

これは私のコードです:

$(document).ready(function() {
    function imageresize() {
        var contentwidth = $(window).width();
        if ((contentwidth) < '700'){
            $('.fluidimage').each(function(){
                var thisImg = $(this);
                var newSrc = thisImg.attr('src').replace('x2', 'x1');
                thisImg.attr('src', newSrc);
            });
        } else {
            $('.fluidimage').each(function(){
                var thisImg = $(this);
                var newSrc = thisImg.attr('src').replace('x1', 'x2');
                thisImg.attr('src', newSrc);
            });
        }
    }

    imageresize();//Triggers when document first loads

    $(window).bind("resize", function(){//Adjusts image when browser resized
        imageresize();
    });
 });
4

4 に答える 4

4

jQuery や JavaScript ではなく、css3 メディア クエリを使用してみてください。

http://css-tricks.com/media-queries-sass-3-2-and-codekit/

で「img-src」クラスを使用することを検討してください。画面のサイズが白黒 600px から 900px に変更されたとき。x2.jpg が読み込まれます。デフォルトでは x1.jpg が使用されます。

元：

.img-src {
   background-image: url("http://imageurlhere.com/x1.jpg");
}


@media (min-device-width:600px) and (max-width:900px) {
  .img-src {
      background-image: url("http://imageurlhere.com/x2.jpg");
   }
}
于 2012-09-18T07:18:41.910 に答える
2

document.getElementById("myId").src="another.jpg";これは jQuery ではありませんが、id "myId" を持つ img の新しい src を簡単に定義できます。

于 2014-01-29T03:50:01.367 に答える
2

まずはこれを試して...

次のコード行を変更します

$(window).bind("resize", function(){//Adjusts image when browser resized
        imageresize();
    });

に

// Bind event listener
    $(window).resize(imageresize);

imageresize 内にアラートを入れて、機能するかどうかを確認します...

上記がうまくいかない場合...おそらく1つの問題があると思います..

あなたが持っているあなたのコードで

$(document).ready(function() {

 $(window).bind("resize", function(){//Adjusts image when browser resized
        imageresize();
    });
}

そのため、うまく機能しない可能性があるjquery内に存在する関数。その上で、単純な JavaScript を使用してみてください。同様の問題があり、プレーンなjavascriptを使用して解決しました.jqueryは一部のブラウザでは機能しませんでした。

あなたがそれを試みるのを止めるのに十分奇妙に聞こえますが、うまくいくでしょう...

于 2012-09-18T07:11:40.090 に答える
1

ご覧のとおり、コードは正常に動作しますが、私は を使用することを好みsetTimeoutます。サイズ変更の一時停止なしでページが遅くなる場合があります。

$(document).ready(function() {
    var resizeTimer,
        $window = $(window);

    function imageresize()
    {
        if ($window.width() < 700)
        {
            $('.fluidimage').text('< 700');
        }
        else
        {
            $('.fluidimage').text('>= 700');
        }
    }
    imageresize();//Triggers when document first loads

    $window.resize(function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(imageresize, 100);
    });
 });

例: jsfiddle.net/SAbsG/

于 2012-09-18T07:33:19.563 に答える