延迟加载Javascript/CSS工具：LazyLoad

Posted 2021-03-18 kunmomo

什么是LazyLoad

LazyLoad是一个很小的，压缩后1.5kb（未使用Gzip压缩)、不依赖的javascript实用程序，它使根据需要加载外部JavaScript和CSS文件变得超级容易。

只要有可能，LazyLoad将自动并行加载资源，同时在指定要加载的url数组时确保执行顺序。在不保留异步加载脚本的执行顺序的浏览器中，LazyLoad将安全地按顺序加载脚本。

所有浏览器都支持并行加载CSS。然而，目前只有Firefox和Opera支持并行脚本加载，同时保持执行顺序。为了确保脚本始终以正确的顺序执行，LazyLoad将在除Firefox和Opera之外的其他浏览器中依次加载所有脚本。希望其他浏览器能尽快改进它们的并行脚本加载行为

当您需要一个小型、快速、安全的动态JS或CSS加载器，但不需要依赖管理的开销或大型脚本加载器提供的其他额外功能时，请使用LazyLoad。

下载地址

• lazyload源码仓库：源码仓库

• lazyload.js (full source)

• lazyload下载地址：BootCND lazyloadjs

使用方法

使用LazyLoad很简单。只需调用适当的方法

css()：来加载css

js()：来加载JavaScript

并传入要加载的URL或URL数组。如果希望在资源完成加载时得到通知，还可以提供回调函数，以及传递给回调的参数和执行回调的上下文。

一、无阻塞的动态加载单个脚本文件

// Load a single JavaScript file and execute a callback when it finishes.
<script type="text/javascript" src="lazyload-min.js"></script>
<script type="text/javascript">
　　LazyLoad.js(‘http://example.com/foo.js‘, function () {
  　　alert(‘foo.js has been loaded‘);
　　});
</script>

二、无阻塞的动态加载多个脚本文件

要加载多个脚本文件，只需要给LazyLoad.js()方法传入一个url数组

// Load multiple JS files and execute a callback when they‘ve all finished.
<script type="text/javascript" src="lazyload-min.js"></script>
<script type="text/javascript">
    LazyLoad.js([‘foo.js‘, ‘bar.js‘, ‘baz.js‘], function () {
         alert(‘all files have been loaded‘);
    });
</script>

lazyload可以确保在所有浏览器中都以正确的顺序执行，尽管这种无阻塞的方式可以动态的加载很多文件，但是建议尽量减少文件数，因为每次下载仍然是一个独立的HTTP请求，而且回调函数会等待所有文件都下载完成后才会执行

三、动态加载单个css文件

// Load a CSS file and pass an argument to the callback function.
<script type="text/javascript" src="lazyload-min.js"></script>
<script type="text/javascript">
    LazyLoad.css(‘foo.css‘, function (arg) {
          alert(arg);
    }, ‘foo.css has been loaded‘);
</script>

lazyload同样可以动态加载css文件，这没有太大的意义，因为css文件本身就已经是并行下载的，不会阻塞页面的其他进程。

// Load a CSS file and execute the callback in a different scope.
LazyLoad.css(‘foo.css‘, function () {
  alert(this.foo); // displays ‘bar‘
}, null, {foo: ‘bar‘});

浏览器支持

• Firefox 2+

• Google Chrome

• Internet Explorer 6+

• Opera 9+

• Safari 3+

• Mobile Safari

• android

其他浏览器可能可以运行，但还没有经过测试。可以肯定的是，任何基于最近版本的Gecko或WebKit的产品都有可能成功。