Question

我的页面中有图像，如果我的页面的结果小于768px，我的img src必须随data-tablet更改，如果我的页面的结果小于480px，我的img src必须随data-mobil更改或如果我的结果大于768px img src必须随data-web改变，或者如果我的结果大于480，它必须随data-tablet改变我为它写了一些代码，但我想条件或语法有问题< / p>

＆＃13;

$(document).ready(function(){
  
     $(".box img").each(function(){
       var getWeb = $(this).parents(".box").find("img").attr("data-web");
       var getTablet = $(this).parents(".box").find("img").attr("data-tablet");
       var getMobil = $(this).parents(".box").find("img").attr("data-mobil");
       
   if ($(window).width() < 768) {
         $(this).attr("data-src",getTablet);
      }else if ($(window).width() < 480){
        $(this).attr("data-src",getMobil);
      }else if ($(window).width() > 480){
           $(this).attr("data-src",getTablet);
       }else if($(window).width() > 768)
      {
        $(this).attr("data-src",getWeb);
      }
  });
  
});

＆＃13;

.box{
  margin:10px;
  float:left;
}
.box img{
  width:300px;
}

＆＃13;

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
</head>
<body>
  
 <div class="box">
    <img data-src="https://cdn.pixabay.com/photo/2017/01/18/21/34/cyprus-1990939_960_720.jpg" data-web="https://cdn.pixabay.com/photo/2017/01/18/21/34/cyprus-1990939_960_720.jpg" data-tablet="https://cdn.pixabay.com/photo/2017/01/31/09/30/raspberry-2023404_960_720.jpg" data-mobil="https://cdn.pixabay.com/photo/2017/01/20/15/12/ring-nebula-1995076_960_720.jpg" class="lazyload" />
  </div>
  
    
  <div class="box">
    <img data-src="https://cdn.pixabay.com/photo/2017/01/20/15/06/orange-1995056_960_720.jpg" data-web="https://cdn.pixabay.com/photo/2017/01/20/15/06/orange-1995056_960_720.jpg" data-tablet="https://cdn.pixabay.com/photo/2014/06/29/12/46/apple-379373_960_720.jpg" data-mobil="https://cdn.pixabay.com/photo/2016/02/21/00/29/fruit-1213041_960_720.jpg" class="lazyload" />
  </div>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/2.0.7/lazysizes.min.js"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
</body>
</html>

＆＃13;

顺便说一下这些代码的工作原理

else if ($(window).width() > 480){
           $(this).attr("data-src",getTablet);
       }

and click to see project on codepen

Answer 1

您需要运行检查窗口宽度并在resize事件上运行代码

window.onresize = function(event) {
  [your code]
};

Answer 2

尝试将代码放在函数中并在文档准备就绪时调用它：

$(document).ready(function(){

checksize();

 function checksize(){
  $(".box img").each(function(){
    var getWeb = $(this).parents(".box").find("img").attr("data-web");
    var getTablet = $(this).parents(".box").find("img").attr("data-tablet");
    var getMobil = $(this).parents(".box").find("img").attr("data-mobil");

    if ($(window).width() < 768) {
      $(this).attr("data-src",getTablet);
    }else if ($(window).width() < 480){
     $(this).attr("data-src",getMobil);
    }else if ($(window).width() > 480){
       $(this).attr("data-src",getTablet);
     }else if($(window).width() > 768)
    {
     $(this).attr("data-src",getWeb);
    }
   });
 }

});

调整页面大小时更改图像来源？

2 个答案: