1.11.0

LMLJS, 为更少的等待而生！

LMLJS 是一款可爱滴 JavaScript 框架， 内置 Deferred 对象，实现网页图片可视区域加载，异步加载 Js 等静态资源，异步加载 HTML 中 Iframe，异步加载 CSS 样式中图片，让网页以最快的速度 onLoad，让用户在最短的时间内看到网页内容，遵循 MIT 开源协议。

如何获取 LMLJS？

LMLJS 项目地址：https://github.com/leiminglin/LMLJS。将 lml.js 文件中的代码拷贝到网站的 HEAD 标签中的 SCRIPT 标签里面，这么做只是为了让 LMLJS 在所有 JS 前执行。不建议将 LMLJS 单独放在一个 .js 文件中，这样浏览器需要发出一次请求获取 LMLJS，违背了 LMLJS 设计的初衷 - 为更少的等待而生。

启动 LMLJS

LMLJS 启动非常简单。如下代码所示：

<script>

window.onload = function(){
	lml.deferred.promise();
};

</script>

异步执行 JavaScript 脚本

在页面中，如果需要执行 JavaScript 代码，若 执行过程可能比较耗时，比如需要发出请求等，可以将代码放到 LMLJS 的 then 方法中，待网页完全加载后再执行。如下代码所示：

<script>

lml.deferred.then(function(){

	/* do something here */
	
	lml.deferred.promise();
});

</script>

异步 CSS

异步 CSS 是指异步加载 CSS 中的图片。若网页中的 CSS 含有背景图片需要发出请求，可以使用 LMLJS 提供的 lazyCss 功能，将 CSS 内容用 textarea 包裹起来，让图片在页面渲染完成后发出请求。也可以使用其他标签包裹，只要 class 属性里面含有 lazyCss 即可。为了让 TEXTAREA 不被显示出来，需要加上一个 hidden 样式隐藏掉，下文中的 hidden 都代表这个意思。如下代码所示：

<textarea class="lazyCss hidden">

.sitebg{
	background:url(/static/bg.jpg);
}

</textarea>

异步 HTML

异步 HTML 是指异步加载 HTML 中的 Iframe JavaScript 等。若网页中需要嵌入视频或者其他的页面，这样的内容可能会拖慢网页的渲染速度，这种情况下可以使用 LMLJS 提供的 lazyHtml 功能实现异步渲染部分 HTML，异步加载的 HTML 必须要用 TEXTAREA 包裹。如下代码所示：

<textarea class="lazyHtml hidden">

<iframe height=300 width="90%" 
	src="http://player.youku.com/embed/XODUzNzcwMzg4" 
	frameborder=0 allowfullscreen>
</iframe>

</textarea>

下面的视频是使用 LMLJS 异步加载的。

加载 JavaScript 文件

使用了 LMLJS 后，不建议页面的源代码中直接使用 SCRIPT 标签引入外部 JS 资源，可以使用 LMLJS 提供的 loadJs 方法进行加载，需要注意的是 loadJs 的默认回调函数是 deferred.promise();，如果需要加载的 JavaScript 文件中含有依赖关系，可以传入回调方法实现依次加载。如下代码所示：

<script>

/* 同时加载 */
lml.loadJs(js_src);
lml.loadJs(js_src2);

/* 依次加载 js_src 和 js_src2 */
var loadJs2 = function(){
	lml.loadJs(js_src2, function(){});
}
lml.loadJs(js_src, loadJs2);

</script>

创建 Deferred 对象

若网页中有很多异步任务，且任务的优先级顺序比较复杂，通过 LMLJS 默认提供的一个 deferred 对象还不能够满足的情况下，可以使用 createDeferred 方法创建一个新的 deferred 对象嵌套在 then 方法中，来实现更复杂的异步执行流。上面的例子实现 JS 文件的依次加载同样也可以通过创建新的 deferred 对象来实现。如下代码所示：

<script>

lml.deferred.then(function(){

	var deferred2 = lml.createDeferred();
	
	deferred2.then(function(){
		/* deferred2 对象异步执行流 */
	});
	
	lml.deferred.promise();
	deferred2.promise();
});

window.onload = function(){
	lml.deferred.promise();
};

</script>

可视区域图片异步加载

LMLJS 内置了可视区域异步加载图片功能，当页面在滚动的过程中，图片标签出现在可视区域范围内，则开始加载图片资源，防止在页面中图片很多的情况下页面渲染太慢，同时也减少了服务器压力，避免了不必要的流量浪费。要实现图片在可见范围加载，需要将图片的 src 属性改为 osrc 属性，另外可以附加上一个 osrc-bak 属性作为备份图片，备份图片仅在图片加载失败后尝试的补救措施。如下代码所示：

<img 
	width="635" 
	height="476" 
	osrc="http://git.oschina.net/leiminglin/images/raw/master/2014/12/IMG_20141224_122726.jpg" 
	osrc-bak="https://raw.githubusercontent.com/leiminglin/images/master/2014/12/IMG_20141224_122726.jpg" 
	alt="世纪大道午后时光-LMLPHP后院" 
	title="世纪大道午后时光-LMLPHP后院" 
/>

下面的图片需要在可见范围内才会被加载。