簡介#

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

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

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

bLazy.js使用簡介

bLazy.js使用簡介

簡介#

怎么使用bLazy#

步驟1##

步驟2##

選項#

breakpoints`[array](false)`###

container`[string](window)`###

error`[string]('b-error)`###

errorClass`[string]('b-error)`###

loadInvisible`[bool](false)`###

offset`[int](100)`###

root`[object](document)`###

saveViewportOffsetDelay`[int](50)`###

selector`[string]('.b-lazy')`###

separator`[char]('|')`###

src`[string]('data-src')`###

success`[function(ele)](false)`###

successClass`[string]('b-loaded')`###

validateDelay`[int]('25')`###

其他選項##

Background images

Image transitions

Public functions

Responsive Images

Iframes, videos, unity games 等等###

和AngularJS一起使用

更多在線示例

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

bLazy.js使用簡介

簡介#

怎么使用bLazy#

步驟1##

步驟2##

選項#

breakpoints[array](false)###

container[string](window)###

error[string]('b-error)###

errorClass[string]('b-error)###

loadInvisible[bool](false)###

offset[int](100)###

root[object](document)###

saveViewportOffsetDelay[int](50)###

selector[string]('.b-lazy')###

separator[char]('|')###

src[string]('data-src')###

success[function(ele)](false)###

successClass[string]('b-loaded')###

validateDelay[int]('25')###

其他選項##

Background images

Image transitions

Public functions

Responsive Images

Iframes, videos, unity games 等等###

和AngularJS一起使用

更多在線示例

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

breakpoints`[array](false)`###

container`[string](window)`###

error`[string]('b-error)`###

errorClass`[string]('b-error)`###

loadInvisible`[bool](false)`###

offset`[int](100)`###

root`[object](document)`###

saveViewportOffsetDelay`[int](50)`###

selector`[string]('.b-lazy')`###

separator`[char]('|')`###

src`[string]('data-src')`###

success`[function(ele)](false)`###

successClass`[string]('b-loaded')`###

validateDelay`[int]('25')`###