html避免小图片

在我的应用程序中，我显示由后端发送的随机图像（我将它们作为图像链接接收：例如：“

http://example.com/image.png

”），我只使用

$（“#theDiv”）.prepend（“”）

将图像附加到我的div中。我的问题是，有时图像太小（例如小于100k）。我想知道是否有可能检测到非常小的图像，而不将它们添加到div？如果没有，我如何实现我的应用程序来解决这个问题

---

谢谢

选项1:您的后端是否可以提供以kb为单位的图像大小？你可以添加一些过滤器

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

选项1性能更好

备选案文2示例：

$（函数（）{
//关于文档就绪检查图像大小
var minW=1000；
var minH=300；
$（'.preload wrapper img'）。每个（函数（索引，项）{
var thisW=$（item）.width（）；
var thisH=$（item）.height（）；
如果（thisW>=minH&&thisH>=minH）{
//添加到图像包装器
$（'.images包装器'）.append（项）
}
})
})

。预加载包装器{
位置：绝对位置；
左：800000像素；
}

---

选项3：上传图像时验证图像以确保其符合标准选项1：很难，因为我不对后端100%负责。你能解释一下如何实现选项2吗？

-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);