页面加载

一、异步加载的方案
1、创建并插入iframe，让它异步执行js；
2、通过ajax去获取js代码，eval执行；
3、script标签上添加defer属性，推迟；defer是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行。

<script defer src="myjs.js"></script>

4、script标签上添加async属性，异步；async是在加载完成后立即执行，如果是多个，执行顺序和加载顺序无关。

<script async src="myjs.js"></script>

上述方法都不能解决在web页面完全加载后，再加载外部js的问题。
5、动态插入script标签，google推荐。

<script type="text/javascript">
function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "myjs.js";
    document.body.appendChild(element);
}
if(window.addEventListener){
  window.addEventListener("load", downloadJSAtOnload, false);
} else if (window.attachEvent){
  window.attachEvent("onload", downloadJSAtOnload);
} else {
  window.onload = downloadJSAtOnload;
}
</script>

放在</body>前。

一般来说，如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。如果同时使用async和defer属性，后者不起作用，浏览器行为由async属性决定。

二、图片加载
1、设置默认图片
在加载图片这里，后端应该做一个默认设置，如果数据库的图片读取不到，就给前端返回一张默认图片，如果后端返回的图片数据出现问题，前端页面就会很难看，这时候需要前端设置一张默认的图。

<img src="album/default.png" onerror="javascript:this.src=document.getElementById('J_dom_for_empty_img').src"/>

2、单张图片懒加载
不管是在移动端开发还是在PC端开发，基本都会用到图片的懒加载，这其中最大的原因就是为了保证页面打开的速度（正常情况下3秒之内如果首页打不开，就已经算是死亡时间了）。
基本思想是，给一张默认的图片占位，当滚动条滚动到对应区域的时候，我们再开始加载真实的图片。

<div id="J_page">
  <!--loadpic是当前IMG标签的自定义属性，存储的是真实图片的地址-->
  <img src="" loadpic="img/jd.jpg">
</div>

* {
    margin: 0;
    padding: 0;
    font-family:Helvetica, sans-serif;
    font-size: 14px;
}
img {
    display: block;
    border: none;
}
#J_page {
    margin: 10px auto;
    width: 350px;
    height: 200px;
    border: 1px solid green;
    background: url("img/default.gif") no-repeat center center #e1e1e1;
}
#J_page img {
    display: none;
    width: 100%;
    height: 100%;
}

var J_page = document.getElementById('J_page') , 
    simg = J_page.getElementsByTagName('img')[0];
function lazyImg(curimg){
    var tempImg = new Image(); // 创建一个临时的img标签
    tempImg.src = curimg.getAttribute('loadpic');
    tempImg.onload = function() { // 当图片能够正常加载
    curimg.src = this.src;
    curimg.style.display = 'block';
    tempImg = null;
  }
  curimg.isLoad = true;
}
lazyImg(simg);

3、多张图片懒加载
A、设置一个定时器，计算每张图片是否会随着滚动条的滚动，而出现在视口（也就是浏览器中的展现网站的空白部分）中；
B、为<img>标签设置一个暂存图片URL的自定义属性（例如loadpic），当图片出现在视口时，再将loadpic的值赋给图片的src属性。

<script>
var imgs = document.getElementsByTagName('img');
//获取视口高度与滚动条的偏移量
function lazyload(){
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  var viewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  for(var i = 0; i < imgs.length; i++) {
    var x = scrollTop + viewportSize - imgs[i].offsetTop;
    if(x > 0){
      imgs[i].src = imgs[i].getAttribute('loadpic');   
    }
  }
}
setInterval(lazyload,1000);
</script>

三、如何判断整个页面加载完成？
用document.onreadystatechange的方法来监听状态改变，然后document.readyState == "complete"判断是否加载完成。

document.onreadystatechange = function(){
  if(document.readyState == "complete") { 
    alert('加载完毕');
  } 
}