Javascript 对于同一个元素，each（）总是触发两次

我正在为图像实现延迟加载功能，这需要对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中总共有16个图像

data imageload=false

，但我一次只滚动到一个图像以查看效果。在任何情况下，进入视口的每个元素都会触发两次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;
};

$.fn.isInViewport=function（）{
var elementTop=$（this）.offset（）.top，
elementBottom=elementTop+$（this）.outerHeight（），
viewportTop=$（窗口）.scrollTop（），
视口底部=视口顶部+$（窗口）.height（）；
返回elementBottom>viewportTop&&elementTop

---

我尝试了很多方法，但它一直在发生。

问题是，scroll事件在scroll事件期间不断触发，如果您不在isInViewport函数中处理这一问题，它将运行得比您预期的更多

因为我不确定IMG的结构是什么（它们是否占据视口的全部高度？），如果不是，则可能在滚动过程中多次满足该条件

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

• 使用“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);
  

归功于代码

此代码的作用很简单-在scroll事件期间，除了上次触发scroll事件外，间隔将始终被清除

• 通过bool字典处理函数中某种类型的“wasthismageloaded”（只有在没有太多图像的情况下才有用），其中键是URL

---

问题在于，scroll事件在scroll事件期间持续触发，如果您不在isInViewport函数中处理该问题，它将比您预期的运行更多

因为我不确定IMG的结构是什么（它们是否占据视口的全部高度？），如果不是，则可能在滚动过程中多次满足该条件

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

• 使用“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);
  

归功于代码

此代码的作用很简单-在scroll事件期间，除了上次触发scroll事件外，间隔将始终被清除

• 通过bool字典处理函数中某种类型的“wasthismageloaded”（只有在没有太多图像的情况下才有用），其中键是URL

---

您正在运行

$（窗口）。在

上运行两次代码，或者触发两个滚动事件，因为滚动事件在滚动时不断触发。请尝试查看是否多次调用函数“isInViewport”并返回true@ZivWeissman它是。每次滚动（或按下向下键）都会运行两次。很难说，尝试用Fiddle制作一个工作版本您正在运行<代码>$（窗口）。在<代码>上运行两次，或者触发两个滚动事件，因为滚动事件在滚动时不断触发。尝试查看功能“isInViewport”被多次调用并返回true@ZivWeissman它是。每次滚动（或按下向下键）都会运行两次。很难说，试着用小提琴制作一个工作版本