Question

我写了以下内容，可能会找到一个可用的解决方案，用于使用Wordpress的响应式内联背景图像：

jQuery(document).ready(function ($) {

  // BREAKPOINTS

  var lg = 1280,
      md = 1024,
      sm = 768,
      xs = 680,
      xxs = 400;

  var switch_background = function(){
    var breakpoints = {lg:1280,md:1024,sm:768,xs:680,xxs:400}; 

    var size = 'fullsize';
    var width = $(window).width();

    if(width <= breakpoints.xxs) {
      size = 'medium';
    } else if (width <= breakpoints.sm) {
      size = 'mediumlarge'; 
    }

    $(".bg-switch").css('background-image', function () {
      var bg = ('url(' + $(this).data(size) + ')');
      return bg;
    });
  }

  $(window).resize(function(){
    switch_background();
  });

  if ($(window).width() <= xxs){  
    switch_background()
  }

  if ($(window).width() > xxs && $(window).width() <= sm){  
    switch_background()
  }

});

原因是可以使用Wordpress编辑和更改背景图像。

这在开发中有效，当我调整浏览器窗口大小时，它会在某些断点处按预期替换图像。

但是，这实际上是否会给我下载的好处，然后在较小的设备上显示较小的图像？

以下是Codepen上的一个平面HTML示例：http://codepen.io/abbasarezoo/pen/XpOqqY

使用jQuery数据属性响应内联背景图像

0 个答案: