在这篇博文中，我们将学习blazyJS加载图片的javascript库。
bLazy.js简介
对于任何网络应用来说，为了获得更好的使用体验和SEO观点，页面加载是一个重要因素。在任何网页上，如果任何元素或对象，如图片、视频或任何HTML元素需要较长的时间，它将影响应用程序的整体页面速度。BlazyJs是一个开源的javascript框架，它可以在页面加载时懒散地加载元素，而不是急切地加载。懒惰加载的工作方式是异步的，也就是说，它在主页面完全加载后再加载元素，这个框架将解决以下问题。
特点和优势
- 异步加载图片或任何元素
- 根据屏幕宽度提供图片--小屏幕得到的图片与网页图片不同
- 它是一个简单的库，大小为2kb
- 没有对Jquery的依赖
- 它减少了服务器的带宽，整体上提高了页面的加载时间
- 它可以在所有最新和旧的浏览器上运行
- 提供了NPM和CDN脚本
- 它支持所有类型的图片，包括背景图片
- 懒于加载所有使用src属性的html元素，如iframe、视频、音频和游戏。
在html应用程序上的安装和使用
我们可以通过多种方式将Blazyjs集成到网络应用中
在基于Jquery和javascript的网页中加入CDN脚本
脚本可以从这里下载，也可以按下面的方法加入CDN
它提供了npm包。所以你可以使用npm或bower工具来安装到你的应用程序。
npm install blazy --save
bower install blazy --save
初始化和加载blazy对象
首先我们需要在html页面的脚本标签中创建Blazy对象
var bLazy = new Blazy({
//options here
});
选项 容器 - 这个选项可以在滚动容器内加载图片 成功回调 - 一旦成功加载图片，这个回调将被加载 lazyily 选择器 - 这是jquery选择器的一种语法。要加载所有的图片，请使用img作为这个选项的值。
使用实例
如何在html页面中懒惰地加载图片，请举例说明
图像将使用img标签显示在html页面上。要使用img标签来显示图片，请在img标签上添加class=".b-lazy "的css样式 在data-src属性中提供图片的url，以便异步加载。
<img class="b-lazy" data-src="image-url" />
如何在html页面中懒惰地加载背景图像
用div标签代替img标签，为div提供css样式，并提供图片的网址。
<div class="b-lazy" data-src="image-url"></div>
下面的例子解释了以下内容
- 如何在html页面中懒惰地加载iframe - 使用b-lazy css样式
- 如何懒惰地加载html5视频
- 如何懒惰地加载html脚本
- 如何懒惰地提供多个图片
// iframe lazy loading in a page
// lazy load videos
// This explampl explains about how to lazy images based on
var bLazy = new Blazy({
breakpoints: [{
width: 320
, src: 'data-src-320 image file'
}
, {
width: 1024
, src: 'data-src-1024 image file'
}]
});
