javascript - 根据屏幕分辨率动态更改图像

Question

我有一个包含全屏背景图像的部分，该图像是通过 JavaScript 数据属性加载的。由于这是一个响应式网站，相同的背景图片 (1920 x 1080px) 会根据屏幕大小进行缩放，这对性能来说不是很友好，例如在屏幕尺寸较小的手机上。

HTML:

<!-- BEGIN PAGE TITLE -->
<section id="page-title" class="page-title-lg" data-bg-img="nature/full-20.jpg">
  <div class="container">
    <div class="page-title-wrapper">
      <div class="page-title-txt">
        <h1>Large Page Title</h1>
      </div>
    </div>
  </div>
</section>
<!-- END PAGE TITLE -->

JS:

// Image Background 
$('[data-bg-img]').each(function() {
      var dataImg = $(this).attr('data-bg-img');
      $(this).css('background-image', 'url(assets/img/' + dataImg + ')');
 });

有没有办法动态检测窗口大小并通过不同的数据属性(例如 2560 x 1440、1920 x 1440、1280 x 800、640 x 960 等)加载适当的图像？

Answer 1

如果平板电脑、台式机和移动设备有三种不同的图像，您可以创建一个简单的系统来自动选择要加载的正确图像。

<section id="page-title" class="page-title-lg" data-bg data-bg-img-desktop="nature/full-20.jpg" data-bg-img-tablet="nature/full-20.jpg" data-bg-img-mobile="nature/full-20.jpg"></section>

注意四个属性:data-bg data-bg-img-desktop、data-bg-img-tablet、data-bg-img-mobile。

当页面加载时，获取屏幕宽度并加载最接近屏幕尺寸的图像:

<script type="text/javascript">

var imageBgs = document.querySelectorAll('[data-bg]');
var screenWidth = window.innerWidth;

for(var i=0; i<imageBgs.length; i++) {
    if( screenWidth < 768 ){
        // Load mobile image
        imageBgs[i].style.backgroundImage = 'url('+imageBgs[i].getAttribute('data-bg-img-mobile')+')';
    } else if( screenWidth >= 768 && screenWidth <= 1024 ) {
        // Ipad
        imageBgs[i].style.backgroundImage = 'url('+imageBgs[i].getAttribute('data-bg-img-tablet')+')';
    } else {
        // desktop image
        imageBgs[i].style.backgroundImage = 'url('+imageBgs[i].getAttribute('data-bg-img-desktop')+')';
    }
}

</script>