Question

我正在为图像实现延迟加载功能，这需要对REST后端进行AJAX调用。

我正在使用窗口的滚动和调整大小事件来检测图像元素是否进入视口：

$(window).on('resize scroll', function() {
          $('img[data-imageloaded=false]').each(function() {
              if ($(this).isInViewport()) {
                  alert($(this).parent().html());
                  //xhrLoadImage($(this).data("userid"), $(this));
              }
          })
      });

在DOM中，data-imageloaded=false中总共有16张图像，但是我一次只能滚动到一张以查看效果。在每种情况下，都会为进入视口的每个元素触发两次alert（）。

还使用它来检测图像元素的可见性：

$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top,
        elementBottom = elementTop + $(this).outerHeight(),
        viewportTop = $(window).scrollTop(),
        viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

我尝试了很多事情，但是一直在发生。

Answer 1

问题在于滚动事件在滚动事件期间会连续触发，如果您在isInViewport函数中不处理该事件，它将以超出预期的速度运行。

因为我不确定您的img的结构是什么（它们是否占据了viewPort的全部高度？），否则可能在滚动期间不止一次满足条件。

您可以尝试以下操作之一：

使用“ scrollStop”事件，如下所示：

// Setup isScrolling variable
var isScrolling;

// Listen for scroll events
window.addEventListener('scroll', function ( event ) {

  // Clear our timeout throughout the scroll
  window.clearTimeout( isScrolling );

  // Set a timeout to run after scrolling ends
  isScrolling = setTimeout(function() {

    // Your code goes here!
    console.log( 'Scrolling has stopped.' );

  }, 66);

}, false);

信用代码here

此代码的作用很简单-在滚动事件期间，除非最后一次滚动事件被触发，否则间隔将始终被清除。

在您的函数中处理某种形式的“ wasThisImageLoaded”（仅当您没有太多图像时才有用）-通过布尔字典（其中的关键是您的URL）来处理

每个（）总是为同一元素触发两次

1 个答案: