Question

我有以下代码

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

如何将图像搜索的结果限制为只显示适合屏幕的图像量。

Answer 1

您可以使用element的getBoundingClientRect（）函数进行检查。以下是isVisible函数的示例，纯js。

超时只是等待加载图像。

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

图像搜索结果仅限于屏幕尺寸

1 个答案: