5

ユーザーがindex.htmlをロードするたびに、配列から異なる画像を自動的にロードするこのコードがあります。これはjqueryコードです：

$(window).load(function() {
    var randomImages = ['img1','img2','img3','img4','img5'];
    var rndNum = Math.floor(Math.random() * randomImages.length);

     var $win = $(this);
     var $img = $('#background').attr('src', '_img/bg/index_rnd/' + randomImages[rndNum] + '.jpg').css({'position':'fixed','top':0,'left':0});
        function resize() {
            if (($win.width() / $win.height()) < ($img.width() / $img.height())) {
              $img.css({'height':'100%','width':'auto'});
            } else {
              $img.css({'width':'100%','height':'auto'});
            }
        }
        $win.resize(function() { resize(); }).trigger('resize');
    });

画像をさまざまな画面解像度に適応させるのは初めてです。ですから、誰かが私のウェブを例えば2560 / 1440pxのimacで開くと、画像はこのコードで正しく適応されると思いましたが、完全にピクセル化されると思います。したがって、これらのコンピューターがより大きなファイルをロードして解像度を調整できるように、より大きな画像ファイルを作成する必要があると思います。速度の理由から、通常の画面を使用している他のユーザーが大きなファイルをロードすることを避けたいと思います。このコードに何を追加して、より大きな画面に大きなファイルをロードさせ、ピクセル化しないようにすることができますか？！？！

PD画面サイズのさまざまなグループに最適な画像解像度もわかっている場合は、非常に役立ちます。

ありがとう！

4

1 に答える 1

1

ボートを浮かせるものは何でも、ウィンドウサイズ（高さまたは幅）をいつでも確認でき、画像ファイル名に何かを追加してimg4.jpg、通常の画像やimg4_big.jpg高解像度画像などの高解像度画像を読み込むことができます。

このようになります：

$(window).load(function() {
    var randomImages = ['img1', 'img2', 'img3', 'img4', 'img5'];
    var rndNum = Math.floor(Math.random() * randomImages.length);

    var $win = $(this);

      //add _big to image filename if window width is over 1920px, 
      //like so : img4_big.jpg etc.

    var isBig = $(window).width() > 1920 ? '_big' : '';
      //add the string to the image filename
    var $img = $('#background') 
     .attr('src', '_img/bg/index_rnd/' + randomImages[rndNum] + isBig + '.jpg')
     .css({
         'position': 'fixed',
         'top': 0,
         'left': 0
    });

    function resize() {
        if (($win.width() / $win.height()) < ($img.width() / $img.height())) {
            $img.css({
                'height': '100%',
                'width': 'auto'
            });
        } else {
            $img.css({
                'width': '100%',
                'height': 'auto'
            });
        }
    }
    $win.resize(function() {
        resize();
    }).trigger('resize');
});​
于 2012-08-18T11:20:16.160 に答える