2016-07-16 19 views
0

Ich habe den folloing CodeBildsuchergebnisse beschränkt auf Bildschirmgröße

 function (data) { 
      var size = 0; 
      windowWidth = $(window).width(); //retrieve current window width 
      windowHeight = $(window).height(); //retrieve current window height 
      $.each(data.items, function (i, item) { 
       var y = item.description.search("width"); 
       picWidth = parseInt(item.description.substr(y + 7, 3)); 
       var x = item.description.search("height"); 
       picHeight =parseInt(item.description.substr(x + 8, 3)); 


       $("<img/>").attr("src", item.media.m).prependTo("#results"); 
      }); 
     }); 
    }); 

, wie ich die Ergebnisse einer Bildsuche begrenzen kann nur Menge der Bilder disply, die den Bildschirm passen.

Antwort

0

Sie können es mit getBoundingClientRect() - Funktion des Elements überprüfen. Hier ist ein Beispiel für isVisible-Funktion, pure js.

Timeout wartet nur auf das Laden der Bilder.

function isVisible(element) { 
 
    const rect = element.getBoundingClientRect(); 
 

 
    return (isInRange(rect.top, 0, window.innerHeight) || 
 
     isInRange(rect.bottom, 0, window.innerHeight)) && 
 
     (isInRange(rect.left, 0, window.innerWidth) || 
 
      isInRange(rect.right, 0, window.innerWidth)); 
 
} 
 

 
function isInRange(value, start, stop) { 
 
    return value >= start && value <= stop; 
 
} 
 

 
setTimeout(() => { 
 
    const visible = Array.prototype.filter.call(document.getElementsByTagName('img'), isVisible); 
 

 
    document.getElementById('target').innerHTML = visible.map(el => el.id).join(', '); 
 
}, 2000);
img { 
 
    margin: 100px; 
 
}
visible ids: <span id="target"></span> 
 
<br> 
 
<img id="first" src="http://loremflickr.com/320/240" /> 
 
<img id="second" src="http://loremflickr.com/200/240" />

Verwandte Themen