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>

将jQuery forEach函数转换为JavaScript？

1 个答案: