Question

我为img标记创建了一个属性，如示例代码data-tablet，data-mobil

<div class="myDiv">
 <img  src="img-1.jpg" data-tablet="img-2.jpg" data-mobil="img-3.jpg">
</div>

我希望如果我的屏幕更改为平板电脑我的img src更改为data-tablet或我的屏幕是移动我的src必须更改为data-mobil

MY JS

$(document).ready(function(){

    $(window).resize(function(){
      var tabletSrc = $(".main-carousel img").attr("data-tablet");
      var mobilSrc = $(".main-carousel img").attr("data-mobil");
      if($(window).width() <=768){

         $('img').attr('src',tabletSrc);
      }
      if($(window).width() <=480 ) {
         $('img').attr('src',mobilSrc);
      }
  });

});

click to see my works

问题是我怎么能这样做，如果你点击你将看不到任何工作

注意：我不想使用srcset或css

Answer 1

请参阅此CodePen了解工作版本。

您的代码存在一些问题：

手机和平板电脑的外壳都是在手机套中执行的。
$(".main-carousel img")是一组图片。而不是那样，你可能想要在单个图像上操作。这可以在.each()。

以下是相关代码：

$(window).resize(function() {
  if ($(window).width() <= 480) {
    $('img').each(function() {
      $(this).attr('src', $(this).attr('data-mobil'));
    });
  } else if ($(window).width() <= 768) {
    $('img').each(function() {
      $(this).attr('src', $(this).attr('data-tablet'));
    });
  }
});

Answer 2

使用srcset代替基于js的设备尺寸验证。

<img src="images/space-needle.jpg"
srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w,
images/space-needle-hd.jpg 600w">

因此，现在浏览器会根据浏览器尺寸自动设置要下载和显示的图像。

https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/

Answer 3

您使用了错误的class name。你的div有“myDiv”类，你选择“main-carousel”

$(document).ready(function(){

    $(window).resize(function(){
      var tabletSrc = $(".myDiv img").attr("data-tablet");
      var mobilSrc = $(".myDiv img").attr("data-mobil");
      if($(window).width() <=768){

         $('img').attr('src',tabletSrc);
      }
      if($(window).width() <=480 ) {
         $('img').attr('src',mobilSrc);
      }
  });

});

Here是codepen

Answer 4

保持短宽度。您的验证始终是tablet。自480 < 768

以来

改变你的条件。

$(window).resize(function(){
      var tabletSrc = $(".someDiv img").attr("data-tablet");
      var mobilSrc = $(".someDiv img").attr("data-mobil");
      var imgSrc = "defaultImageSrc" //src for default image
      var windowWidth = $(window).width();
      if(windowWidth <= 480 ) { //first small width
         imgSrc = mobilSrc;
      }else if(windowWidth <= 768){ //next larger one
         imgSrc = tabletSrc;
      } //if else default will there for you which is initialised there.
});

Answer 5

您可以尝试为您转盘多张图片

function makeResize(){
  var imageSrc = $(".myDiv img");
  if($(window).width() <=768 && $(window).width()>480){
    $(imageSrc).each(function(key,value){
      $(value).attr('src',$(value).data('tablet'));
    });
  }else if($(window).width() <=480 ) {
    $(imageSrc).each(function(key,value){
      $(value).attr('src',$(value).data('mobile'));
    });
  }else{
    $(imageSrc).each(function(key,value){
      $(value).attr('src',$(value).data('default'));
    });
  }
}

$(document).ready(function(){
    $(window).resize(function(){
        makeResize();
    });
    makeResize();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="myDiv">
 <img  src="org1.jpg" data-default="org1.jpg" data-tablet="tablet1.png" data-mobile="mobile1.jpg">
 <img  src="org2.jpg" data-default="org2.jpg" data-tablet="tablet2.png" data-mobile="mobile2.jpg">
 <img  src="org3.jpg" data-default="org3.jpg" data-tablet="tablet3.png" data-mobile="mobile3.jpg">
</div>

注意复制并添加正确的图像源，然后尝试。上面的代码适用于多个图像。

Answer 6

试试这个：

$(window).resize(function(){

var realImg =  $(".main-carousel img").attr();
var tabletSrc = $(".main-carousel img").data("tablet"); //use .data instead of attr
var mobilSrc = $(".main-carousel img").data("mobil");

  if($(this).width() <= 768){
     $('img').attr('src',tabletSrc);
  }
  else if($(this).width() <= 480 ) { // use else if instead of if
     $('img').attr('src',mobilSrc);
  }

  else{
   $('img').attr('src',realImg);
  }

});

在响应中使用另一个img属性更改img src

6 个答案: