延迟加载Javascript/CSS工具:LazyLoad

xiyang 2020-01-06

什么是LazyLoad

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

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

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

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

下载地址

使用方法

使用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的产品都有可能成功。

相关推荐

飞蛾分吧 / 0评论 2017-12-08
82244951 / 0评论 2013-01-22