Question

我有这个代码，每次用户加载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打开我的网页，图像将会正确地使用这个代码进行调整，但我想它会完全被pix处理。所以我想，我必须创建一个更大的图像文件，以便那些计算机加载更大的文件以适应分辨率。我想避免其他具有正常屏幕的用户出于速度原因加载大文件。我可以添加什么来使这个代码更大的屏幕加载更大的文件，所以它没有像素化？！？！

Pd积。如果你也知道哪个是不同屏幕尺寸组的最佳图像分辨率，那将非常有用！

谢谢！

Answer 1

您可以随时检查窗口大小，无论是高度还是宽度，无论您的船是什么浮动，并在图像文件名中添加一些东西以加载高分辨率图像，例如将img4.jpg作为普通图像并{{1}作为高分辨率图像等。

看起来像这样：

img4_big.jpg

为不同的网页尺寸加载不同的图像

1 个答案: