Html attribute control with if

my img has 3 attribute but if has one attribute (data-web-src,data-tablet-src,data-mobil-src) than set my src than one of them attribute is that possible ?

please click to see on codepen

function noLazyImages(e) {
  $(e + '.lazy_res').attr('src', function(_, oldSrc) {
    var elData = $(this).data(),
      winWidth = $(window).width();
    if (winWidth >= 768 && winWidth < 960) {
      return elData['webSrc']
    } else if (winWidth < 768 && winWidth >= 480) {
      return elData['tabletSrc']
    } else if (winWidth < 480) {
      return elData['mobilSrc']
    } else if (winWidth > 960) {
      return elData['webSrc']
    }
  })
}

$(document).ready(function() {
  noLazyImages("body img");
})
img {
  width: 300px;
}
<img class="lazy_res" data-web-src="http://image.prntscr.com/image/bdf1d94b64104ef2acd2ceee19882cd1.jpg" data-mobil-src="http://image.prntscr.com/image/caa51ab4900448589201207e57b2630f.jpg" data-tablet-src="http://image.prntscr.com/image/4b2862a292b543139daa7805a58c17fd.jpg"
/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

javascript jquery html css
sahil Kothiya

Answers 1

Submit Answer
  • Sunil Patel

    I think the following code will do what you want.

    I removed the data-tablet-src from the img tag which is there in the question snippet so that you can run both and compare the results.

    Logic

    if(elData['tabletSrc']) will be false if elData['tabletSrc'] is not present. So it will return return elData['webSrc'] instead.

    function noLazyImages(e) {
  $(e + '.lazy_res').attr('src', function(_, oldSrc) {
    var elData = $(this).data(),
      winWidth = $(window).width();
    if (winWidth < 768 && winWidth >= 480) {
    	if(elData['tabletSrc']){
      	return elData['tabletSrc'];
      }
    } else if (winWidth < 480) {
      if(elData['mobilSrc']){
      	return elData['mobilSrc'];
      }
    }
    return elData['webSrc'];
  });
}

$(document).ready(function() {
  noLazyImages("body img");
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="lazy_res" data-web-src="http://image.prntscr.com/image/bdf1d94b64104ef2acd2ceee19882cd1.jpg" data-mobil-src="http://image.prntscr.com/image/caa51ab4900448589201207e57b2630f.jpg"
/>

Related Articles