简介#
bLazy是一个轻量级, 滚动懒加载图片的JavaScript库
, 使用纯JavaScript编写, 不依赖任何第三方JavaScript库(如jQuery等). bLazy支持所有的主流浏览器, 包括IE7及以上版本.
怎么使用bLazy#
Github: https://github.com/dinbror/blazy
使用bLazy只需简单的两步即可.
步骤1##
- 添加一个样式类
"b-lazy"
. - 添加一个占位图(也即src属性值所引用的图片).
- 给img添加一个自定义属性data-src, 即真正要加载的图片.
示例:
<img class="b-lazy" src="img/icon/load.gif" data-src="image.jpg" alt="alt-text"/>
步骤2##
在HTML文件中引入blazy.js文件并进行初始化.如果你有用到jQuery(或其他类似的库), 将初始化动作放在document.ready函数内.
示例:
<script type="text/javascript" src="blazy.js"></script>
<script type="text/javascript">
+(function(){
//初始化
var blazy = new Blazy();
})();
</script>
选项#
blazy的一些自定义选项.
breakpoints[array](false)
###
根据屏幕的大小来从多张图片中加载一张.
如下示例代码:
html
<img class="b-lazy"
src="img/icon/load.gif"
data-src="image.jpg"
data-src-small="image-small.jpg"
data-src-medium="image-medium.jpg"
alt="alt-text"
/>
js
var bLazy = new Blazy({
breakpoints: [{
width: 420 // max-width
, src: 'data-src-small'
}
, {
width: 768 // max-width
, src: 'data-src-medium'
}]
});
在这段示例中,
当屏幕最大宽度小于420px时, 加载data-src-small属性指定的图片.
当屏幕最大宽度小于768时, 加载data-src-medium属性指定的图片.
其他情况, 加载data-src属性指定的图片.
container[string](window)
###
如果你需要限制某个元素内的图片才需要懒加载, 可以在这里设置, 默认值为: window
var bLazy = new Blazy({
container: '#scrolling-container' // 默认值为window
});
error[string]('b-error)
###
在加载图片失败的时候, 将调用此函数. 这里有两种返回信息, missing
和invalid
.
如果没有定义data-src属性将返回消息missing
.
如果定义的data-src无效将返回消息invalid
.
示例代码:
var bLazy = new Blazy({
success: function(ele){
// Image has loaded
// Do your business here
},
error: function(ele, msg){
if(msg === 'missing'){
// Data-src is missing
}
else if(msg === 'invalid'){
// Data-src is invalid
}
}
});
errorClass[string]('b-error)
###
如果某个元素内容加载失败, 将会添加errorClass指定的样式类.
loadInvisible[bool](false)
###
如果想加载不可见的元素, 可以将项设置为true
.
offset[int](100)
###
offset用于控制离元素被访问有多少px时, 开始提前加载元素指定的内容(图片等). 默认为100, 即当元素距离可见区域100px时, 将会加载元素指定的内容.
var bLazy = new Blazy({
offset: 100 //在图片距离可视区域100px时加载它
});
root[object](document)
###
可以更改根对象,这增加了对Web组件和影子dom的支持。
saveViewportOffsetDelay[int](50)
###
调用resize事件的频率, 默认为50ms.
selector[string]('.b-lazy')
###
应该延迟加载的元素选择器。 如果你想延迟加载所有图像写'img'。 您可以添加多个选择器,以逗号分隔; '.b-lazy,.bLazy,.blazy'。
示例:
var bLazy = new Blazy({
selector: 'img' // 选择所有图片
});
separator[char]('|')
###
用于传递视网膜图像, 如: src="image.jpg|image@2x.jpg"
.
src[string]('data-src')
###
能够找到元素原始源的属性, 默认值为: data-src
success[function(ele)](false)
###
加载成功时, 将执行回调函数function(ele)
, 默认值为: false
var bLazy = new Blazy({
success: function(ele){
// Image has loaded
// Do your business here
},
error: function(ele, msg){
if(msg === 'missing'){
// Data-src is missing
}
else if(msg === 'invalid'){
// Data-src is invalid
}
}
});
successClass[string]('b-loaded')
###
加载成功时元素将获得的类名
validateDelay[int]('25')
###
设置滚动/调整大小时应该调用validate函数的频率。 默认值为25ms。
其他选项##
Background images
当然, 使用blazy也可以加载background-image.
如果需要懒加载的元素(带有b-lazy类的, 默认值为: b-lazy, 也可自定义)不是img
元素, 将会作为元素的background image进行懒加载.
例如:
<div class="b-lazy" data-src="background-image.jpg"></div>
Image transitions
你也可以给blazy加上图片加载完成后的过渡效果.
如果某个元素的图片加载成功了, 会给该元素添加一个加载完成后的标记样式类(默认为: b-loaded).因此, 你就可以给图片添加加载完成后的过渡效果了.
示例代码:
.b-lazy {
-webkit-transition: opacity 500ms ease-in-out;
-moz-transition: opacity 500ms ease-in-out;
-o-transition: opacity 500ms ease-in-out;
transition: opacity 500ms ease-in-out;
max-width: 100%;
opacity: 0;
}
.b-lazy.b-loaded {
opacity: 1;
}
Public functions
- revalidate(), 为可见图像重新验证文档。 如果您使用脚本或ajax添加图像,则非常有用
- load(element(s), force), 如果未折叠,则强制加载指定元素。 如果您还想加载一个折叠/隐藏的元素,您可以添加true作为第二个参数。
您可以传递单个元素或元素列表。 使用getElementById,getElementsByClassName,querySelectorAll,querySelector和jQuery selector进行测试。 - destroy(), 取消绑定事件并重置图像数组
代码示例:
var bLazy = new Blazy();
bLazy.functionName(); // 例如: bLazy.revalidate();
Responsive Images
关于如何延迟加载和多服务响应图像而不使页面回流的示例。
HTML片断
<div class="image-wrapper ratio_16-9">
<img class="b-lazy"
src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
data-src="image.jpg"
data-src-small="image-small.jpg"
alt="alt-text"
/>
<!-- Fallback for non JavaScript browsers -->
<noscript><img src="image.jpg" alt="alt-text" /></noscript>
</div>
CSS
.image-wrapper {
// Adding a loader and background color. The user will see it
// if the image is loading slow.
background: #1E1E1E url('loader.gif') center center no-repeat;
width: 100%
}
.ratio_16-9 {
// The image has a 16/9 ratio. Until the image has loaded
// we need to reserve some space so the page won't reflow.
// How to calculate the space (padding-bottom): 9/16*100 = 56.25
// Another example: you have an image 400x250.
// So if you want to calculate the space you do: 250/400*100 = 62.5
padding-bottom: 56.25%;
height: 0;
}
.b-lazy {
max-width: 100%;
}
Iframes, videos, unity games 等等###
blazy.js可以懒加载任何带有src属性的元素, 不仅仅只是对img有用.
示例代码:
<iframe class="b-lazy" data-src="page.html" width="300" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
和AngularJS一起使用
blazy.js也可以用于AngularJS, 使用时需要注意的是, 需要修改一下默认的自定义属性的名称(因为AngularJS也在使用data-src).
// Example
var bLazy = new Blazy({
src: 'data-blazy' // Default is data-src
});
//Markup
<img class="b-lazy"
src="placeholder-image.jpg"
data-blazy="image.jpg"
alt="alt-text"
/>