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.run();
};

</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 方法进行加载，需要注意的是：为了兼容 1.0 版本， loadJs 的默认回调函数仍然是 deferred.promise(); ，但建议传递一个回调，如果没有就传递空函数，如果需要加载的 JavaScript 文件中含有依赖关系，可以传入数组实现依次加载，1.1 版本增加了 competeLoad() 方法实现竞争加载，应用场景为：当项目中使用了很多的 JS CDN 服务商，可以使用此方法达到最快的加载效果，此方法适用于加载相同的 JS 文件。如下代码所示：

<script>

/* 普通加载 */
lml.loadJs(js_src);
lml.loadJs(js_src2, callback);

/* 依次加载 js_src 和 js_src2 */

lml.loadJs([js_src, js_src2], function(){});

/* 竞争加载 js_src 和 js_src2 */
lml.loadJs.competeLoad([js_src, js_src2], function(){
	/* callback */
});

/* loadJs 方法无需放在 deferred 的 then 方法中，在页面 DOMContentLoaded 后才会开始自动加载*/
</script>

loadJs 方法的第三个参数可以不传递，传入 1 代表强制加载，强制加载的意思就是如果页面已经加载了某个 JS 文件，仍然会再次请求这个 JS 文件；如果不传递，已经加载过的 JS 文件不再加载，也就是 DOM 节点中不会出现两个一样的 JS 标签，然后直接执行回调函数。

创建 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后院"
/>

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