bootstrap中的坑 之 modal缓存

bootstrap3.*的modal一般用法都在模态框的使用办法里面，其中具体说一下缓存。

使用场景：

点击按钮弹出动态modal，加载modal的时候显示loading.gif图片，完全加载后显示完整的加载页面。点击其他按钮继续显示其他的modal页面（上一个modal页面不能显示出来）

代码：

<script type="text/javascript">
    ;(function ($,window,undefined) {
       $('#modal').on('show.bs.modal', function () {
           $(this).append("<img src='{{  asset("images/loading.gif") }}' class='modal-loading' style='width:60px;height:60px;position:absolute;top:50%;left:50%;margin-left:-30px;margin-top:-30px;z-index:98;' >");
       });
        $('#modal').on('hidden.bs.modal', function () {
            $(this).find(".modal-content").html('');
            $(this).removeData();
        });
        $("#modal").on('loaded.bs.modal',function(){//数据加载完成后删除loading
            $(this).find("img").remove();
        });
    })(jQuery);
</script>

#modal为整个模态框的id，img为添加的loadinggif图，

loaded.bs.modal是在动态页面加载完成之后执行“删除img元素”（本来想用shown.bs.modal，但是在页面没有加载出来这个动作就已经执行了，所以放弃了这个）。$(this).removeData();网上一般就只有这一个答案，这条语句的确是删除了缓存文件，如果只使用这一条语句我们会发现页面上的元素根本就没有删除，点击其他按钮的时候，再次加载页面首先显示的会是上一个页面的内容，而且loading同时也会显示出来，等待一段时间后modal被刚刚的请求页面覆盖，loading消失，所以为了解决这个问题，我又添加了上面一条语句。