javascript - Change img src with another img attribute on Responsive - Stack Overflow

admin管理员组

文章数量:1291009

I created a attribute for img tag as in the example code like data-tablet, data-mobil

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

and I want if my screen change for tablet my img src change with data-tablet or my screen is for mobil my src must change with 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

question is how can I do that I want if u click you gonna see nothing work

note: I don't want to use srcset or css

I created a attribute for img tag as in the example code like data-tablet, data-mobil

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

and I want if my screen change for tablet my img src change with data-tablet or my screen is for mobil my src must change with 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

question is how can I do that I want if u click you gonna see nothing work

note: I don't want to use srcset or css

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Dec 22, 2016 at 14:33 ani_css asked Dec 22, 2016 at 11:20 ani_cssani_css 2,12633 gold badges3333 silver badges7777 bronze badges 11

• And where is your question? – Christof Commented Dec 22, 2016 at 11:24
• where's the problem – ab29007 Commented Dec 22, 2016 at 11:26
• 2 @recruit_man please edit your question instead of adding the question as a ment – Hugo G Commented Dec 22, 2016 at 11:28
• 1 If you really want to use this techniques then you need to identify device first then you need to trigger you action to change the src to image tag. In this case you can try is.js (github./arasatasaygin/is.js). It has got some events that you can trigger like is.tabelet, is.windowsphone please see the link – Asad Ali Commented Dec 22, 2016 at 11:32
• 1 I updated my answer from your work URL. Now check it out @recruit_man – Sumon Sarker Commented Dec 22, 2016 at 12:03

 |  Show 6 more ments

6 Answers 6

Sorted by: Reset to default 4

Please see this CodePen for a working version.

There were some issues with your code:

• Both the case for mobile and tablet was executed in the mobile case.
• $(".main-carousel img") is a collection of images. Instead of that, you probably want to operate on a single image. This can be done with the help of .each().

Here is the relevant code:

$(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'));
    });
  }
});

Use srcset instead of js based validations for device dimensions.

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

So, now the browser will automatically device which image to download and show depending on the browser dimensions.

Check out more

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

You can try this for you carousel multiple images

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

Note Copy and add proper image source then try. Above code will work for multiple images.

You are using wrong class name. Your div has class "myDiv" and you are selecting by "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 is codepen

Keep the short width first. Your validation always goes for tablet first. since 480 < 768

Change your conditions like this.

$(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.
});

Try this:

$(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);
  }

});

本文标签： javascriptChange img src with another img attribute on ResponsiveStack Overflow