简介#

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"
/>

更多在线示例

---

原英文链接: http://dinbror.dk/blog/blazy/?ref=github