html避免小图像

Question

我的应用程序，我显示后端发送的随机图像（我收到它们作为链接图像：例如：“http://example.com/image.png”），我只是使用$('#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例如：

$(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) 
 
    } 
 
     
 
    
 
    
 
    
 
    }) 
 
})

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

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