Question

我的图片有3个属性，如下所示

 data-web-src
 data-tablet-src
 data-mobil-src

因此，如果data-tablet-src或data-mobil-src未定义或为空，则隐藏当前图像。到目前为止我无法实现。

＆＃13;

   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'];
    });
}

$(window).resize(function() {
    noLazyImages("body img");
});
noLazyImages("body img");

＆＃13;

img{
  width:300px;
}

＆＃13;

<img class="lazy_res" data-web-src="https://image.prntscr.com/image/0d2af672b40c4d9ebf113a1784c33a7f.png" data-mobil-src="https://image.prntscr.com/image/b1e10f433e404191bb78123f5188dc56.png" data-tablet-src="https://image.prntscr.com/image/a9fb88455946432890b27a946e99d387.png"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

＆＃13;

CodePen Demo

Answer 1

使用此JS代码

function noLazyImages(e) {
  $(e + '.lazy_res').each(function(id, elm) {

    if (!$(elm).data()['mobilSrc'] || !$(elm).data()['tabletSrc'])     {
      $(this).hide();
    }

    $(elm).attr('src', function(_, oldSrc) {
      var elData = $(elm).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'];
    });

  });
}

function noLazyImages(e) {
  $(e + '.lazy_res').each(function(id, elm) {

    if (!$(elm).data()['mobilSrc'] || !$(elm).data()['tabletSrc'])     {
      $(this).hide();
    }
    
    $(elm).attr('src', function(_, oldSrc) {
      var elData = $(elm).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'];
    });

  });
}

$(window).resize(function() {
  noLazyImages("body img");
});
noLazyImages("body img");

img {
  width: 300px;
}

<img class="lazy_res" data-web-src="https://image.prntscr.com/image/0d2af672b40c4d9ebf113a1784c33a7f.png" data-mobil-src="https://image.prntscr.com/image/b1e10f433e404191bb78123f5188dc56.png" data-tablet-src="https://image.prntscr.com/image/a9fb88455946432890b27a946e99d387.png"
/>

<img class="lazy_res" data-web-src="https://image.prntscr.com/image/0d2af672b40c4d9ebf113a1784c33a7f.png" data-tablet-src="https://image.prntscr.com/image/a9fb88455946432890b27a946e99d387.png" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Answer 2

如果您想隐藏data-tablet-src或data-mobil-src undefined为空的图片或为空，您只需要使用测试：

if(!elData['tabletSrc'] || elData['tabletSrc'] == '' || !elData['mobilSrc'] || elData['mobilSrc'] == ''){
     $(this).hide();
     return "";
}

<强>演示：

这是一个有两个图片示例的工作Demo片段。

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

img{
  width:300px;
}

<img class="lazy_res" data-web-src="https://image.prntscr.com/image/0d2af672b40c4d9ebf113a1784c33a7f.png" data-mobil-src="https://image.prntscr.com/image/b1e10f433e404191bb78123f5188dc56.png" data-tablet-src="https://image.prntscr.com/image/a9fb88455946432890b27a946e99d387.png"/>

<img class="lazy_res" data-web-src="https://image.prntscr.com/image/0d2af672b40c4d9ebf113a1784c33a7f.png" data-mobil-src="" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

您可以看到没有data-tablet-src且data-mobil-src为空的第二张图片被隐藏。

Answer 3

我会使用.attr，而不是使用.each，如果不符合条件，则可以隐藏图片：

＆＃13;

function noLazyImages(e) {
  $(e + '.lazy_res').each(function() {
    var image = $(this),
      elData = image.data(),
      winWidth = $(window).width();
      
    if (winWidth < 768 && winWidth >= 480) {
 
      // tablet screen width
      if (elData['tabletSrc']) {
        image.attr('src', elData['tabletSrc']).show();   // show image if exists or hide
      } else {
        image.hide();
      }
    } else if (winWidth < 480) {
      // mobile screen width
      if (elData['mobilSrc']) {
        image.attr('src', elData['mobilSrc']).show();  // show image if exists or hide
      } else {
        image.hide();
      }
    } else {

      // all other screen widths
      if (elData['webSrc']) {
        image.attr('src', elData['webSrc']).show();  // need to add .show() here in case image was hidden by a different screen size
      } else {
        image.hide();
      }
    }
  })
}

$(window).resize(function() {
  noLazyImages("body img");
});
noLazyImages("body img");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="lazy_res" data-web-src="https://image.prntscr.com/image/0d2af672b40c4d9ebf113a1784c33a7f.png" data-mobil-src="https://image.prntscr.com/image/b1e10f433e404191bb78123f5188dc56.png" data-tablet-src="https://image.prntscr.com/image/a9fb88455946432890b27a946e99d387.png"
/>

＆＃13;

Fiddle so you can adjust the frame size and see it working

我要补充的另一件事是延迟加载的图像意味着在js加载之前有一个默认的占位符图像网址，图像滚动到视图中

Answer 4

尝试使用jquery的filter()函数，找到data-mobil-src＆amp;＆amp;的属性data-tablet-src为空，null.undefined使用if(!)。它返回false属性元素。然后应用hide()

请参阅下面的代码段我添加了两张图片first一张是真的second一张是假的（不可见）

$('.lazy_res').filter(function(){
return !$(this).attr('data-mobil-src').trim() && !$(this).attr('data-tablet-src').trim()
}).hide()

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'];
    });
}

$(window).resize(function() {
    noLazyImages("body img");
});
noLazyImages("body img");

img {
  width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="lazy_res" data-web-src="https://image.prntscr.com/image/0d2af672b40c4d9ebf113a1784c33a7f.png" data-mobil-src="https://image.prntscr.com/image/b1e10f433e404191bb78123f5188dc56.png" data-tablet-src="https://image.prntscr.com/image/a9fb88455946432890b27a946e99d387.png"
/>
<img class="lazy_res" data-web-src="https://image.prntscr.com/image/0d2af672b40c4d9ebf113a1784c33a7f.png" data-mobil-src="" data-tablet-src=""
/>

使用jquery对图像进行源代码控制？

4 个答案: