将 jQuery forEach 函数转换为 JavaScript

Question

我的任务是将jQuery函数转换为普通的JavaScript。该函数用于检查元素是否在视口内。如果它在视口内，则采用 data-bglazy 属性，并使用该属性的值向该元素添加背景图像样式。需要转换的函数是：

$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();
    return elementBottom > viewportTop && elementTop < viewportBottom;
  };
 $(window).on('resize scroll', function() {
    $('.bgLazy').each(function() {
      if ($(this).isInViewport()) {
        var lazyImg = $(this).attr('data-bglazy');
        $(this).css('background-image', 'url(' + lazyImg + ')');
      }
    });
  });

目前我在尝试将上述函数转换为 JavaScript 时所拥有的：

function isInViewport(el){
    var elementTop = el.offsetTop;
    var elementBottom = elementTop + el.offsetHeight;
    var viewportTop = window.scrollTop;
    var viewportBottom = viewportTop + window.offsetHeight;
    return elementBottom > viewportTop && elementTop < viewportBottom;
  };
    var bgElements = document.querySelectorAll('.bgLazy');
    bgElements.forEach(bgElementLoop);
    function bgElementLoop(item, index) {
      if(item.isInViewport()){
        var lazyImg = item.getAttribute('data-bglazy');
        item.style.backgroundImage = 'url(' + lazyImg + ')';
      }
    }

    window.addEventListener("resize, scroll", bgElementLoop);

我试图弄清楚在尝试将jQuery函数转换为JavaScript时我搞砸了哪一部分

编辑：

在阅读了一些评论后，我进行了视图更改。 isInViewport 函数没有更改，但我所做的更改如下：

    var bgElements = Array.prototype.slice.call(document.querySelectorAll('.bgLazy'));
    bgElements.forEach(bgElementLoop);
    function bgElementLoop(item, index) {
      if(item.isInViewport(item)){
        var lazyImg = item.getAttribute('data-bglazy');
        item.style.backgroundImage = 'url(' + lazyImg + ')';
      }
    }
    window.addEventListener("resize", bgElementLoop);
    window.addEventListener("scroll", bgElementLoop);

所以我在这里所做的是将 bgElements 变量从

var bgElements = document.querySelectorAll('.bgLazy');

自

var bgElements = Array.prototype.slice.call(document.querySelectorAll('.bgLazy'));

然后，我将调整大小和滚动事件侦听器分为：

window.addEventListener("resize", bgElementLoop);
window.addEventListener("scroll", bgElementLoop);

Answer 1

这是一个工作示例，其中包含我从评论中的所有建议。

function isInViewport(el) {
  var b = el.getBoundingClientRect();
  return b.top >= 0 &&
    b.left >= 0 &&
    b.right <= (window.innerWidth || document.documentElement.clientWidth) &&
    b.bottom <= (window.innerHeight || document.documentElement.clientHeight);
};
var bgElements = document.querySelectorAll('.bgLazy');
function onScrollResize() {
  bgElements.forEach((item, index) => {
    if (isInViewport(item)) {
      var lazyImg = item.getAttribute('data-bglazy');
      setTimeout(() => item.innerHTML = 'loaded', 1000);
      item.style.backgroundImage = 'url("' + lazyImg + '")';
    }
  });
}
document.addEventListener("DOMContentLoaded", onScrollResize);
window.addEventListener("resize", onScrollResize);
window.addEventListener("scroll", onScrollResize);

<div class='bgLazy' data-bglazy="http://i.imgur.com/rw0Jwpm.jpg">stuff</div><br>
<div class='bgLazy' data-bglazy="http://i.imgur.com/rw0Jwpm.jpg">stuff</div><br>
<div class='bgLazy' data-bglazy="http://i.imgur.com/rw0Jwpm.jpg">stuff</div><br>
<div class='bgLazy' data-bglazy="http://i.imgur.com/rw0Jwpm.jpg">stuff</div><br>
<div class='bgLazy' data-bglazy="http://i.imgur.com/rw0Jwpm.jpg">stuff</div><br>
<div class='bgLazy' data-bglazy="http://i.imgur.com/rw0Jwpm.jpg">stuff</div><br>
<div class='bgLazy' data-bglazy="http://i.imgur.com/rw0Jwpm.jpg">stuff</div><br>
<div class='bgLazy' data-bglazy="http://i.imgur.com/rw0Jwpm.jpg">stuff</div><br>
<div class='bgLazy' data-bglazy="http://i.imgur.com/rw0Jwpm.jpg">stuff</div><br>
<div class='bgLazy' data-bglazy="http://i.imgur.com/rw0Jwpm.jpg">stuff</div><br>
<div class='bgLazy' data-bglazy="http://i.imgur.com/rw0Jwpm.jpg">stuff</div><br>
<div class='bgLazy' data-bglazy="http://i.imgur.com/rw0Jwpm.jpg">stuff</div><br>
<div class='bgLazy' data-bglazy="http://i.imgur.com/rw0Jwpm.jpg">stuff</div><br>
<div class='bgLazy' data-bglazy="http://i.imgur.com/rw0Jwpm.jpg">stuff</div><br>
<div class='bgLazy' data-bglazy="http://i.imgur.com/rw0Jwpm.jpg">stuff</div><br>
<div class='bgLazy' data-bglazy="http://i.imgur.com/rw0Jwpm.jpg">stuff</div><br>
<div class='bgLazy' data-bglazy="http://i.imgur.com/rw0Jwpm.jpg">stuff</div><br>
<div class='bgLazy' data-bglazy="http://i.imgur.com/rw0Jwpm.jpg">stuff</div><br>
<div class='bgLazy' data-bglazy="http://i.imgur.com/rw0Jwpm.jpg">stuff</div><br>