模态框加载高德地图时，遇到的加载失败问题
2017-11-22 14:15
190 查看
模态框加载高德地图时，遇到的加载失败问题
本文中将简单说一下[bootstrap][6]框架中模态框在实际应用中遇到的问题及解决方案：Qusetion
项目中使用[bootstrap][6]模态框，当点击按钮触发模态框后，在模态框中加载一个新页面，要求新页面加载出高德地图代码如下：
index.html页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>主页面</title>
<!--外部文件引入-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
<script type="text/javascript">
$(function(){
$('#myModal').load('content.html');
})
</script>
</body>
</html>content.html页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>内容页面</title>
<!--外部文件引入-->
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.4.1&key=c105406d9f035fb806c671e12dc75db5"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<style>
#container {height:100%}
</style>
</head>
<body>
<!--加载地图-->
<div id="container"></div>
<script type="text/javascript">
var map = new AMap.Map('container', {
resizeEnable: true,
zoom:11,
center: [125.31166, 43.861915]
});
// 实例化点标记
function addMarker(lat,lon) {
var marker = new AMap.Marker({
icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
position: [lon, lat]
});
marker.setMap(map);
}
</script>
</body>
</html>Case
代码运行后，发现地图未加载出来。console控制台未报错，经判断应该是js加载过程中出现问题。进行简单调整后，解决问题。Answer
将content.html文件中引入的外部文件，放入index.html中进行引入，经实践，解决问题！代码如下：
index.html页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>主页面</title>
<!--外部文件引入-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.4.1&key=c105406d9f035fb806c671e12dc75db5"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
<script type="text/javascript">
$(function(){
$('#myModal').load('content.html');
})
</script>
</body>
</html>content.html页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>内容页面</title>
<style>
#container {height:100%}
</style>
</head>
<body>
<!--加载地图-->
<div id="container"></div>
<script type="text/javascript">
var map = new AMap.Map('container', {
resizeEnable: true,
zoom:11,
center: [125.31166, 43.861915]
});
// 实例化点标记
function addMarker(lat,lon) {
var marker = new AMap.Marker({
icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
position: [lon, lat]
});
marker.setMap(map);
}
</script>
</body>
</html>Summary
此问题的发生与浏览器的读取机制有关，具体如下：Web页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的：
1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，
服务器返回html文件；
2. 浏览器开始载入html代码，发现head标签内有一个link标签引用外部CSS文件；
3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
4. 浏览器继续载入html中body部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
5. 浏览器在代码中发现一个img标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
7. 浏览器发现了一个包含一行Javascript代码的script标签，赶快运行它；
8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个div（style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；
9. 终于等到了/html的到来，浏览器泪流满面……
10. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下link标签的CSS路径；
11. 浏览器召集了在座的各位div，span，ul，，li们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请
求了新的CSS文件，重新渲染页面。
Quote
本文末尾引用了一部分【浏览器的渲染机制解释】，来自神奇的百度搜索。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ListView图片加载缓慢、局部更新失败等问题你遇到了吗？
- win8.1 下activex编程遇到的问题之 “控件已加载 但对DllRegisterServer的调用失败”
- 使用DexClassLoader加载dex，已经加载的类遇到findLoadedClass失败的问题
- WinCE 调试某手写输入法时遇到的加载手写库失败的问题
- WinCE 调试某手写输入法时遇到的加载手写库失败的问题
- 使用vs(visual studio code)写python代码遇到的import requests失败问题
- 页面加载插件时遇到的零碎问题
- SQL Server 2008 安装过程中遇到“性能计数器注册表配置单元一致性”检查失败 问题的解决方法【已验证
- VS2008中关于“加载安装组件时遇到问题。取消安装”的解决
- 在使用 SQL Server 的过程中，用户遇到最多的问题莫过于连接失败了。一般而言，有两种连接SQL Server 的方式，一是利用 SQL Server 自带的客户端工具
- 工作中遇到的问题--实现程序运行时就加载CustomerSetting的第二种方法
- cocos2dx在vs2013加载项目失败（针对路径更改问题）
- IIS配置遇到的问题——未能加载文件或程序集“Oracle.DataAccess”或它的某一个依赖项。试图加载格式不正确的程序。
- 混合开发中遇到的上拉刷新，下拉加载的问题
- RecycleView 瀑布流中加载更多遇到的问题
- 如何解决卸载VS2008加载安装组件时遇到问题
- Ubuntu Kylin中解决qt加载mysql数据库失败的问题
- win7下修改注册表问题 模块"jscript.dll"已加载，但对DllRegisterServer的调用失败，错误代码为0x80004005 我是WIN7
- android listview 加载遇到的问题
- 搞了两天，加载mme_host.ko失败，居然是权限问题