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/1440 像素的 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 回答