Question

我是我的应用程序，我正在显示后端发送的随机图像（我将其作为图像链接收到：ex：＆＃34; http://example.com/image.png＆＃34;），我只使用$('#theDiv').prepend('<img id="theImg" src=' + link + '/>')将图像附加到我的div中。我的问题是有时候图像太小（例如小于100k）。我想知道是否可以检测非常小的图像并且不将它们添加到div中？如果没有，我如何实现我的应用程序来解决这个问题？

感谢。

Answer 1

-You can check image size in KB for this code and detect small images.
-If u want to get image size in bytes then remove '/1000'.

var obj = new XMLHttpRequest();
    obj.open('HEAD', 'natural.jpeg', true);
    obj.onreadystatechange = function(){
      if ( obj.readyState == 4 ) {
        if ( obj.status == 200 ) {
          if(obj.getResponseHeader('Content-Length')/1000 > 100)
          {
            alert('Valid image');
          }
          else
          {
            alert('Small image size '); 
          }
        } else {
          alert('ERROR');
        }
      }
    };
    obj.send(null);

Answer 2

选项1：您的后端可以为您提供kb的图片大小？你可以添加一些过滤器。

选项2：在隐藏的div中预加载图片，并在将其附加到目标div之前检查它的大小。

选项1表现更好

选项2示例：

＆＃13;

$(function(){
  //on document ready check images sizes
  var minW = 1000;
  var minH = 300;
  $('.preload-wrapper img').each(function(index, item) {
    var thisW = $(item).width();
    var thisH = $(item).height();
    
    if (thisW >= minH && thisH >= minH) {
      //add to images wrapper
      $('.images-wrapper').append(item)
    }
        
    
    
    
  })
})

＆＃13;

.preload-wrapper {
  position: absolute;
  left: 800000px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<div class="preload-wrapper">
  <img src="http://www.toolkit2collaborate.ca/wp/wp-content/uploads/2014/02/ICON_Example.png">
  <img src="https://cdn0.iconfinder.com/data/icons/customicondesignoffice5/256/examples.png">
  <img src="http://previews.123rf.com/images/carmenbobo/carmenbobo1412/carmenbobo141200628/34665210-Rubber-stamp-with-word-example-inside-vector-illustration-Stock-Vector.jpg"></div>

<div class="images-wrapper">
  
</div>

＆＃13;

html避免小图片

2 个答案: