jQuery使用html()设置的内容中含有jQuery代码时,IE浏览器反应迟缓。

WBOY
發布: 2016-06-06 20:32:11
原創
1075 人瀏覽過

最近尝试开发一个简单的在线报表,基本工作流程如下:

index.html页面中有一DIV元素,id="div_result",默认没有任何内容;
index.html页面有一段jQuery代码,作用是使用$.get()/test.php 发送请求,返回的内容一个表格 的html代码,使用$("#div_result").html()输出到当前页面的div元素中。

这段返回的html代码(表格)中含有jQuery代码,作用是处理表格样式(隔行变色,选中行高亮显示)。

出现的问题:
chrome浏览器中:快速在表格上移动鼠标,选中行高亮的特效响应速度非常快。
在所有IE浏览器中:上述特效出现明显的卡顿现象,无论表格行数多少都是如此。

停掉$("div_result").html(),手动在index.html中的div元素下面加入一静态表格并填充测试数据,使用相同的jQuery代码处理表格特效,chrome和IE响应速度都非常快。

主要代码如下:

<code><br><br><div id="result_div"></div>




<script>
function get_data(tb_typ) {
        $.ajax({
            type:"get",
            url:"result.php",
            data:"table_type="+tb_typ,
            cache:false,
            success:function(data){$('#result_div').html(data);},
            databype:"html"}
        )
}

$(document).ready(function(){
    var dataVal = "orders";
    get_data(dataVal);

    //隔行变色,选中高亮
    var tb_obj = $('#my_table');
    tb_obj.find('tr:even').addClass('row_even');
    tb_obj.find('tr:odd').addClass('row_odd');
    
    tb_obj.find('tr').not(':first')
        .mouseover(function(){
        $(this).addClass('tr_over');
    })
        .mouseout(function(){
        $(this).removeClass('tr_over');
    });
});
</script>


</code>
登入後複製
登入後複製

回复内容:

最近尝试开发一个简单的在线报表,基本工作流程如下:

index.html页面中有一DIV元素,id="div_result",默认没有任何内容;
index.html页面有一段jQuery代码,作用是使用$.get()/test.php 发送请求,返回的内容一个表格 的html代码,使用$("#div_result").html()输出到当前页面的div元素中。

这段返回的html代码(表格)中含有jQuery代码,作用是处理表格样式(隔行变色,选中行高亮显示)。

出现的问题:
chrome浏览器中:快速在表格上移动鼠标,选中行高亮的特效响应速度非常快。
在所有IE浏览器中:上述特效出现明显的卡顿现象,无论表格行数多少都是如此。

停掉$("div_result").html(),手动在index.html中的div元素下面加入一静态表格并填充测试数据,使用相同的jQuery代码处理表格特效,chrome和IE响应速度都非常快。

主要代码如下:

<code><br><br><div id="result_div"></div>




<script>
function get_data(tb_typ) {
        $.ajax({
            type:"get",
            url:"result.php",
            data:"table_type="+tb_typ,
            cache:false,
            success:function(data){$('#result_div').html(data);},
            databype:"html"}
        )
}

$(document).ready(function(){
    var dataVal = "orders";
    get_data(dataVal);

    //隔行变色,选中高亮
    var tb_obj = $('#my_table');
    tb_obj.find('tr:even').addClass('row_even');
    tb_obj.find('tr:odd').addClass('row_odd');
    
    tb_obj.find('tr').not(':first')
        .mouseover(function(){
        $(this).addClass('tr_over');
    })
        .mouseout(function(){
        $(this).removeClass('tr_over');
    });
});
</script>


</code>
登入後複製
登入後複製
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!