html画像を避ける

Question

私のアプリケーションでは、バックエンドによって送信されたランダムな画像を表示しています（例：画像へのリンクとして受け取っています：例：http://example.com/image.png）、$('#theDiv').prepend('<img id="theImg" src=' + link + '/>')を使用して画像を追加します。私の問題は、時には画像が小さすぎることです（例えば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に追加する前にサイズを確認してください。

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