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

我有一个通过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 -->

---

是否有一种方法可以动态检测窗口大小并通过不同的数据属性（例如2560 x 1440、1920 x 1440、1280 x 800、640 x 960等）加载相应的图像？

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

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

var-imageBgs=document.querySelectorAll（“[databg]”）；
var screenWidth=window.innerWidth；
对于（var i=0；i=768&&screenWidth如果平板电脑、桌面和移动设备有三种不同的图像，您可以创建一个简单的系统来自动选择要加载的正确图像

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


var-imageBgs=document.querySelectorAll（“[databg]”）；
var screenWidth=window.innerWidth；
对于（var i=0；i=768&&screenWidth，是否有不能直接更改CSS的原因

有几种方法可以做到这一点。一种方法是收听
resize
事件，并相应地更新所有图像。不过，您也可以在页面加载期间使用jquery为每个元素创建媒体查询，只需让浏览器处理所有内容的切换

这里有一把小提琴演示了如何做到这一点：

基本上，您需要为要切换的每个屏幕大小添加一个样式，并在此处创建
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);
  });
});

$（函数（）{
//定义一个包含我们要针对的所有媒体查询的模板
var mediaQueryTemplate=\
@媒体屏幕和（最小宽度：350px）{\
#{{ID}}{background image:url（{{BASE_url}}}/350x150}\
} \
@媒体屏幕和（最小宽度：640px）{\
#{{ID}}{背景图片：url（{BASE_url}}}/640x960}\
} \
@媒体屏幕和（最小宽度：1280px）{\
#{{ID}{background image:url（{{BASE_url}}}/1280x800}\
} \
@媒体屏幕和（最小宽度：1280px）{\
#{{ID}{background image:url（{{BASE_url}}}/1280x800}\
} \
@媒体屏幕和（最小宽度：1920px）{\
#{{ID}}{background image:url（{{BASE_url}}}/1920x1440}\
} \
@媒体屏幕和（最小宽度：2560px）{\
#{{ID}}{background image:url（{{BASE_url}}}/2560x1440}\
} \
';
变量$style=$（''）；
$style.appendTo（'head'）；
$（“[data bg img]”）。每个（函数（）{
//从模板中为每个图像生成所有媒体查询，并将其添加到样式标记中
var dataImg=$（this.attr（'data-bg-img'）；
var mediaQueries=mediaQueryTemplate.replace（/{{ID}}/g，this.ID）.replace（/{{BASE\u URL}}/g，dataImg）；
$style.text（$style.text（）+mediaQueries）；
});
});
您不能直接更改CSS有什么原因吗

有几种方法可以做到这一点。一种方法是收听
resize
事件，并相应地更新所有图像。不过，您也可以在页面加载期间使用jquery为每个元素创建媒体查询，只需让浏览器处理所有内容的切换

这里有一把小提琴演示了如何做到这一点：

基本上，您需要为要切换的每个屏幕大小添加一个样式，并在此处创建
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);
  });
});

$（函数（）{
//定义一个包含我们要针对的所有媒体查询的模板
var mediaQueryTemplate=\
@媒体屏幕和（最小宽度：350px）{\
#{{ID}}{background image:url（{{BASE_url}}}/350x150}\
} \
@媒体屏幕和（最小宽度：640px）{\
#{{ID}}{背景图片：url（{BASE_url}}}/640x960}\
} \
@媒体屏幕和（最小宽度：1280px）{\
#{{ID}{background image:url（{{BASE_url}}}/1280x800}\
} \
@媒体屏幕和（最小宽度：1280px）{\
#{{ID}{background image:url（{{BASE_url}}}/1280x800}\
} \
@媒体屏幕和（最小宽度：1920px）{\
#{{ID}}{background image:url（{{BASE_url}}}/1920x1440}\
} \
@媒体屏幕和（最小宽度：2560px）{\
#{{ID}}{background image:url（{{BASE_url}}}/2560x1440}\
} \
';
变量$style=$（''）；
$style.appendTo（'head'）；
$（“[data bg img]”）。每个（函数（）{
//从模板中为每个图像生成所有媒体查询，并将其添加到样式标记中
var dataImg=$（this.attr（'data-bg-img'）；
var mediaQueries=mediaQueryTemplate.replace（/{{ID}}/g，this.ID）.replace（/{{BASE\u 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")
}

windowSize=$（“窗口”）.width（）；
如果（窗口大小>=1000）{
$（“img”）.attr（“src”、“bigFile.png”）
}
如果（窗口大小=500）{
$（“img”）.attr（“src”、“mediumFile.png”）
}
如果（窗口大小<499）{
$（“img”）.attr（“src”、“mobileFile.png”）
}

或者，您可以使用以下内容：

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

如果（窗口大小>=1000）{
$（“imageContainer”）.html（“）；