html页面加载JS文件经常错误
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html页面加载JS文件经常错误相关的知识，希望对你有一定的参考价值。
这种情况并不是JS脚本有错误，而是.js文件没有加载完，当重新刷新一下页面就可以了。但昌不是每个访问都了解这种情况，不可能发现网站脚本错误，就会刷新，请头号是什么原因。如果是动态页面就不会有加载不完全的情况，如asp,php,asp.net
参考技术A 三种异步执行加载Js 脚本的方法。1、直接document.write；
<script language="javascript">
document.write("<script src='test.js'><\/script>");
</script>
2、动态改变已有script的src 属性；
<script src='' id="s1"></script>
<script language="javascript">
s1.src="test.js"
</script>
3、动态创建 script元素；
<script>
var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript= document.createElement("script");
oScript.type = "text/javascript";
oScript.src="test.js";
oHead.appendChild( oScript);
</script>
注 ：
这三种方法都是异步的，所以在采用这类方法动态加载Js 的同时，主界面的Js脚本是继续执行的，所以可能出现通过异步加载的Js代码得不到预期的效果的情况。这时候可以考虑采用Ajax加载Js的方法。
大概原理 ：用XMLHTTP取得要脚本的内容，再创建 Script 对象。另外注意编码的保持一致。因为服务器与XML使用UTF8编码传送数据。 参考技术B 可能是某些冲突引起的，试着清空下游览器缓存试下。如果网站是你的，检查JS代码，看是否与什么有冲突。 参考技术C 也不知道你报的是什么错误信息，很难判断 参考技术D 浏览器兼容问题 换个浏览器试试追问
也不是不兼容的原因，，就是JS文件总是加载错误。而导致JS脚错误,刷新一下就没事了。好像是缓存的原因
本回答被提问者采纳JS实现-页面数据无限加载
原文链接： http://www.cnblogs.com/w-wanglei/p/5863387.html
在手机端浏览网页时，经常使用一个功能，当我们浏览京东或者淘宝时，页面滑动到底部，我们看到数据自动加载到列表。之前并不知道这些功能是怎么实现的，于是自己在PC浏览器上模拟实现这样的功能。先看看浏览效果：
当滚动条滚动到页面底部时，提示“正在加载…”。
当页面已经加载了所有数据后，滚动到页面底部会提示“数据已加载到底了”：
实现数据无限加载的过程大致如下：
1.滚动条滚动到页面底部。
2.触发ajax加载，把请求返回的数据加载到列表后面。
如何判断滚动条是否滚动到页面底部？我们可以设置一个规则：当滚动条的滚动高度和整个文档高度相差不到20像素，则认为滚动条滚动到页面底部了：
文档高度 - 视口高度 - 滚动条滚动高度 < 20
要通过代码实现这样的判断，我们必须要了解上面的这些高度通过哪些代码获取？可以参考我之前写的一篇“HTML元素坐标定位，这些知识点得掌握”。
上面的判断，我封装了一个方法：
//检测滚动条是否滚动到页面底部
function isScrollToPageBottom(){
//文档高度
var documentHeight = document.documentElement.offsetHeight;
var viewPortHeight = getViewportSize().h;
var scrollHeight = window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop || 0;
return documentHeight - viewPortHeight - scrollHeight < 20;
}
判断有了，我们就可以开启一个定时器，900毫秒监测一次，如果isScrollToPageBottom()返回true则调用ajax请求数据，如果返回false则通过900毫秒之后再监测。
下面是核心代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无限分页</title>
<link rel="stylesheet" href="assets/css/index.css"/>
</head>
<body>
<div class="l-page">
<ul id="list" class="list">
</ul>
</div>
<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script src="js/jquery.mockjax.js"></script>
<script type="text/javascript" src="js/dataMock.js"></script>
<script type="text/javascript">
//作为一个对象的w和h属性返回视口的尺寸
function getViewportSize(w){
//使用指定的窗口， 如果不带参数则使用当前窗口
w = w || window;
//除了IE8及更早的版本以外，其他浏览器都能用
if(w.innerWidth != null)
return {w: w.innerWidth, h: w.innerHeight};
//对标准模式下的IE（或任意浏览器）
var d = w.document;
if(document.compatMode == "CSS1Compat")
return {w: d.documentElement.clientWidth, h: d.documentElement.clientHeight};
//对怪异模式下的浏览器
return {w: d.body.clientWidth, h: d.body.clientHeight};
}
//检测滚动条是否滚动到页面底部
function isScrollToPageBottom(){
//文档高度
var documentHeight = document.documentElement.offsetHeight;
var viewPortHeight = getViewportSize().h;
var scrollHeight = window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop || 0;
return documentHeight - viewPortHeight - scrollHeight < 20;
}
//商品模板
function getGoodsTemplate(goods){
return "<li>" +
"<div class=‘pic-wrap leftFloat‘>" +
"<img src=‘" + goods.pic + "‘>" +