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

Question

i有一个带有完整屏幕背景图像的部分，该图像通过JavaScript Data-Attribute加载。由于这是一个响应站点，因此相同的背景图像（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等）？

<）？/div>

如果有三个不同的图像用于平板电脑，桌面和移动设备，则可以创建一个简单的系统来自动选择要加载的正确映像。

<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>

是否有原因您不能直接更改CSS？

有几种方法可以解决这个问题。一种方法是收听resize事件，并相应地更新所有图像。但是，您也可以使用jQuery在页面加载过程中为每个元素创建媒体查询，然后让浏览器处理所有内容。

这是一个小提琴，说明了如何做到这一点：https：//jsfiddle.net/czr41bqp/

本质上，您将为要切换的每个屏幕大小添加样式，并在此处创建style元素并将其附加到标题。当然，这要求您预先生成图像的所有版本，并且尺寸与每个图像一致。

$(function() {
  //define a template with all media queries we want to target
  var mediaQueryTemplate = '
    @media screen and (min-width:350px) { 
        #{{ID}} { background-image: url({{BASE_URL}}/350x150) } 
    } 
    @media screen and (min-width:640px) { 
        #{{ID}} { background-image: url({{BASE_URL}}/640x960) } 
    } 
    @media screen and (min-width:1280px) { 
        #{{ID}} { background-image: url({{BASE_URL}}/1280x800) } 
    } 
    @media screen and (min-width:1280px) { 
        #{{ID}} { background-image: url({{BASE_URL}}/1280x800) } 
    } 
    @media screen and (min-width:1920px) { 
        #{{ID}} { background-image: url({{BASE_URL}}/1920x1440) } 
    } 
    @media screen and (min-width:2560px) { 
        #{{ID}} { background-image: url({{BASE_URL}}/2560x1440) } 
    } 
  ';
  var $style = $('<style>');
  $style.appendTo('head');
  $('[data-bg-img]').each(function() {
    //generate all media queries from the template for each image and add them to the style tag
    var dataImg = $(this).attr('data-bg-img');
    var mediaQueries = mediaQueryTemplate.replace(/{{ID}}/g, this.id).replace(/{{BASE_URL}}/g, dataImg);
    $style.text($style.text() + mediaQueries);
  });
});

一种方法是将" src"属性留为空白，然后根据屏幕宽度分配它。

windowSize = $("window").width();
if(windowSize >= 1000){
$("img").attr("src","bigFile.png")
}
if(windowSize <= 999 && windowSize >= 500){
$("img").attr("src","mediumFile.png")
}
if(windowSize < 499){
$("img").attr("src","mobileFile.png")
}

另外，您可以使用以下内容：

if(windowSize >= 1000){
    $("imageContainer").html("<img src="bigFile">);
}