Javascript 为不同的web屏幕大小加载不同的图像

我有一段代码，每当用户加载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');
    });

$（窗口）.load（函数（）{
var randomImages=['img1'、'img2'、'img3'、'img4'、'img5']；
var rndNum=Math.floor（Math.random（）*randomages.length）；
var$win=$（此）；
var$img=$（'#background'）.attr（'src'，'u img/bg/index_rnd/'+randomages[rndNum]+'.jpg'）.css（{'position'：'fixed'，'top'：0，'left'：0}）；
函数resize（）{
如果（$win.width（）/$win.height（））<（$img.width（）/$img.height（））{
$img.css（{'height'：'100%，'width'：'auto'}）；
}否则{
$img.css（{'width'：'100%，'height'：'auto'}）；
}
}
$win.resize（函数（）{resize（）；}）.trigger（'resize'）；
});

我是适应不同屏幕分辨率的新手。所以我想，如果有人打开我的网页，比如说用一个2560/1440px的imac，图像就会用这个代码正确调整，但我想它会完全像素化。所以我认为，我必须创建一个更大的图像文件，以便这些计算机加载更大的文件以适应分辨率。我想避免其他屏幕正常的用户出于速度原因加载大文件。我可以在这个代码中添加什么来让更大的屏幕加载更大的文件，这样它就不会过时

p.D.如果您还知道对于不同的屏幕尺寸组，哪种图像分辨率最好，那将非常有用

---

谢谢

您可以随时检查窗口大小、高度或宽度，以及漂浮在船上的任何东西，并在图像文件名中添加一些内容以加载高分辨率图像，例如将

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');
});​

$（窗口）.load（函数（）{
var randomImages=['img1'、'img2'、'img3'、'img4'、'img5']；
var rndNum=Math.floor（Math.random（）*randomages.length）；
var$win=$（此）；
//如果窗口宽度超过1920px，则在图像文件名中添加_big，
//比如：img4_big.jpg等。
var isBig=$（window.width（）>1920？“\u big”：”；
//将字符串添加到图像文件名
变量$img=$（“#背景”）
.attr（'src'，'\u img/bg/index\u rnd/'+randomages[rndNum]+isBig+'.jpg'））
.css({
'位置'：'固定'，
“顶部”：0，
“左”：0
});
函数resize（）{
如果（$win.width（）/$win.height（））<（$img.width（）/$img.height（））{
$img.css({
“高度”：“100%”，
“宽度”：“自动”
});
}否则{
$img.css({
“宽度”：“100%”，
“高度”：“自动”
});
}
}
$win.resize（函数（）{
调整大小（）；
}).trigger（'resize'）；
});​