解决display none到display block 渲染时间过长的问题

在做定制页面的时候，遇到这么一个问题，因为弹出框用的是bootstrap的自带的弹出框，控制显示和隐藏也是用自带的属性控制

控制显示，在触发的地方例如botton上面加上

data-toggle="modal" data-target="#myModal"

控制关闭，在取消或者确定的地方加上

<button type="button" class="btn btn-primary">Save changes</button>

这样一来就可以关联控制显示和隐藏目标 #myModal 的模态框，但是问题在于

如果模态框中加载的内容过多，因为以上的属性控制底层其实是控制display none或者block，我们知道从none改成block的时候，是会重新渲染整个元素的，所以在再次点击弹出模态框的时候又执行显示的js

就又会加载一次，重复的加载慢，导致不好的用户体验

解决办法：

第一次加载慢，是数据的问题我们这里不讨论，在隐藏之后我们可以不用 display：none，（bootstrap中当然用的是$(el).closest(".modal").modal('hide');）这样显示的时候只能用show（）解决不了问题，

我们在隐藏的时候不用hide，修改其z-index，将z-index改成一个负数，在body的下面，这样他就视觉不显示了，

$(el).closest(".modal").css("z-index",-2);

显示的时候

$('#'+id).closest(".modal").css("z-index",1050);

这样一来，只有第一次加载的时候慢，其余来回点击的时候会速度快

步骤：

1、去掉关联

　　点击关联时：data-toggle="modal" data-target="#myModal"
　　关闭关联时：btn-primary

2、js控制显示和隐藏直接上代码：

直接上代码

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>解决display渲染时间过长的问题</title>
  <!-- 设置 viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- IE -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 兼容国产浏览器的高速模式 -->
  <meta name="renderer" content="webkit">
 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
   <style>
   /*添加一个背景，辅助 z-index显示或者隐藏用*/
    body::before{
        content:'';
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background-color:#fff;
        z-index:-1;
    }
   </style>
</head>
<body>
<button type="button" class="btn btn-primary btn-lg add-button" data-class="myModal" >Launch demo modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <ul id="UL" style="max-height:700px;overflow:auto;">
            <li></li>
        </ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default"  onclick="initModel.hide(this)">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- 引入 Bootstrap 的 JS 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<script>
var str="";
for(var i=0;i<80000;i++){
    str+="<li><a>"+i+"</a></li>"
}
$("#UL").html(str);
    $(function(){
        $("body").on("click",".add-button",function(e){
            initModel.show($(e.target).attr("data-class"));//motai
        })
    })
    window.initModel={
        show:function (id){
            //显示摸态框
            $('#'+id).modal('show')
            $('#'+id).closest(".modal").css("z-index",1050);
            $(".modal-backdrop").show();
        },
        hide:function(el){
            //$(el).closest(".modal").modal('hide');
            $(el).closest(".modal").css("z-index",-2);//如果用上面句的代码渲染时间会很长，造成不好的用户体验
            $(".modal-backdrop").hide();//隐藏bootstrap自带的遮罩层
        }
    }
</script>
</body>
</html>

解决display none到display block 渲染时间过长的问题

猜你喜欢