jQuery的滚动事件 - 检测滚动到视图元件 - 在Chrome

性能差下面的代码上IE和Firefox工程确定，但铬讨厌它（它运行但确实是laggy）。我相信它可以使浏览器更友好，但是如何？ itemPlaceholder是数百个100x100浮动div（例如图片占位符）。我使用的是jQuery 1.4.4和Chrome v10.0.648.127。jQuery的滚动事件 - 检测滚动到视图元件 - 在Chrome

$(function() { 

    ReplaceVisible(); 
    $(this).scroll(function() { 
     ReplaceVisible(); 
    }); 
}); 

function ReplaceVisible() { 
    $('.itemPlaceholder').each(function (index) { 
     if (HasBeenScrolledTo(this)) { 
      $itemPlaceholder = $(this); 

      $itemPlaceholder.replaceWith('<img src="bicycle.jpg" />'); 
     } 
     else { 
      return false; 
     } 
    }); 
} 

function HasBeenScrolledTo(elem) { 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 
    var elemTop = $(elem).offset().top; 

    return elemTop < docViewBottom; 
}

编辑：与replaceWith否则我们得到很多附加至相同的元素图像的替换append。

来源

2011-03-10 Sprintstar

此运行缓慢铬由于Chrome作为滚动页面时不断触发的onscroll事件（IE和Firefox只有滚动停止时触发onscroll）。

你可以改善排队ReplaceVisible的调用和只允许它在给定时间内，一旦被解雇在这种情况下，Chrome的表现。排队调用的一个例子可以在这里找到（https://github.com/tilleryj/rio/blob/master/public/javascripts/lib/delayed_task.js）

来源

2011-03-11 00:14:07 tilleryj

而直接从马的嘴：http://ejohn.org/blog/learning-from-twitter/ – 2011-03-11 04:59:40

嗯，Chrome并产生更多的滚动事件，但magnatude它不是订单更多。这个问题似乎是由编辑DOM（append）引起的。删除该行，并滚动平稳。 – Sprintstar 2011-03-11 09:18:52

我有一个类似的问题，我必须检测调整大小事件，正如你所期望的，解雇了很多人并锁定了浏览器。我还没有测试过，所以如果它有效，请回报。 :)

$(function() { 
    replaceVisible(); 
    $(this).scroll(replaceVisible); 
}); 

var replaceVisible = (function(){ 
    var last_scroll = null; // Last time we scrolled 
    var paused = false; // We've paused scrolling 
    var delay = 1000; // Delay in between acting on the scroll (ms). 
    return function(){ 
     if(paused) return; 
     if(new Date() - last_scroll < delay){ 
      setTimeout(function(){ paused = false; replaceVisible(); }, delay) 
      paused = true; 
     } 
     $('.itemPlaceholder').filter(HasBeenScrolledTo) 
      .replaceWith('<img src="bicycle.jpg" />'); 
     last_scroll = new Date(); 
    } 
})(); 

function HasBeenScrolledTo(index) { 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 
    var elemTop = $(this).offset().top; 
    return elemTop < docViewBottom; 
}

来源

2011-03-11 00:41:10

感谢您的代码，我从中学到了很多，我相信它减少了浏览器的负载。但Chrome仍然不喜欢DOM编辑.. :( – Sprintstar 2011-03-11 09:55:43

你可以尝试加载一切，但隐藏隐藏然后调用show（），当你想要它是可见的？你必须发布测试页如果你需要更精确的帮助，因为我不确定为什么Chrome现在有代码问题。 – 2011-03-11 15:56:52

jQuery的滚动事件 - 检测滚动到视图元件 - 在Chrome

回答

相关问题