为什么无限滚动使用ajax和jquery.append()崩溃IE?

时间:2012-09-17 09:52:43

标签: jquery ajax scroll append infinite

我使用ajax和jquery.append()使用this tutorial实现了无限滚动。关于ajax的成功,jquery将十<li>个元素附加到<ul>

滚动在Chrome和Firefox上运行正常(可能更快?),但在滚动后会崩溃IE。有关如何避免崩溃IE的任何建议,并可能提高性能?

<li>元素包含:

<div class="post_div" align="left">
 <div class="separator_div"></div>
   <table class="post_table" align="left">
     <tr><!--header e.g title-->
    <td class="td_first1"><!--title-->
        Title
    </td>
    <td class="td_second1"><!--blank-->
    </td>
     </tr>

     <tr><!--middle e.g picture-->
    <td  class="td_first2"><!--picture-->
         <img class="img" id="49130" width="480" height="360" src="pic.jpg"></img>
    </td>
          <td class="td_second2"><!--user,text,vote,share-->
         <div class="user_div"><!--avatar+username-->
             <img class="uavatar" src="avatar.jpg"></img>
             <a href="link/user.php?u=2"><span class="user_span">Jon Doe</span></a>
        </div>
        <div class="text_div"><!--text-->
        some text....
        </div>
       <div class="vote_div"><!--vote-->
        <table align="left" width="220">
                      3coloumsx2rows table here
                    </table>
       </div>
       <div class="share_div"><!--share-->
        2 iframes here          
       </div>
     </td>
    </tr>

    <tr><!--bottom e.g desc-->
    <td class="td_first3"><!--desc-->
    <div class="desc_div">
             onother text here....
    </div>
    </td>
    <td class="td_second3"><!--time+views-->
    0 views  1 second ago
    </td>
    </tr>
    </table>
</div>

1 个答案:

答案 0 :(得分:0)

还需要查看您的javascript代码。

要记住的一件事是,当你滚动时,IE会触发“滚动”事件,等待滚动结束的其他浏览器。结果是你在滚动时不断执行“滚动”事件,所以当你说你正在添加10个LI时,你真的会在几秒钟内添加100个。

解决此问题的方法是设置超时以在滚动时执行ajax请求。如果用户继续滚动,则清除并重置超时。当用户停止滚动时,超时完成并调用您的ajax请求函数。