圖片載入外掛imagesLoaded的配置和使用

notebin發表於2016-10-29

imagesLoaded是一個圖片載入外掛,能夠監測圖片的載入狀態，Github 5k+ stars表明了這款外掛的實用性。

JavaScript is all like “You images done yet or what?”

如果你希望在圖片載入完成後做些什麼。或在圖片載入失敗後能有補救措施，這款外掛會很有用處。
需要注意的是，如果有新新增的元素，要在元素新增完後重新設定外掛，否則不會監測新元素。

安裝方式

npm

npm install imagesloaded

Bower

bower install imagesloaded --save

載入

<script src= "https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.js"></script>

配置方式

// jQuery配置方式
$(`#container`).imagesLoaded( function() {
  // 圖片載入後執行的方法
});

$(`#container`).imagesLoaded( {
     // 屬性配置
  },
  function() {
     // 圖片載入後執行的方法
  }
);

// javaScript配置方式
var imgLoad = imagesLoaded( `#container`, function() {
    // 圖片載入後執行的方法
});

全部事件

$(`#container`).imagesLoaded()
  .always( function( instance ) {
    console.log(`圖片已全部載入，或被確認載入失敗`);
  })
  .done( function( instance ) {
    console.log(`圖片全部載入成功`);
  })
  .fail( function( instance ) {
    console.log(`圖片已全部載入，且至少一個圖片載入失敗`);
  })
  .progress( function( instance, image ) {
    console.log(`每張圖片載入完`);
    var result = image.isLoaded ? `loaded` : `broken`;
    console.log( `載入結果 ` + result + ` 圖片地址 ` + image.img.src );
  });

// javaScript方式
imgLoad.on( `always`, onAlways );

全部配置

// background 檢測背景圖片的載入情況
$(`#container`).imagesLoaded( { background: true }, function() {
  console.log(`#container background image loaded`);
});

// 指定要檢測背景圖片的子元素
$(`#container`).imagesLoaded( { background: `.item` }, function() {
  console.log(`all .item background images loaded`);
});

// JavaScript方式
imagesLoaded( `#container`, { background: true }, function() {
  console.log(`#container background image loaded`);
});

引數

參看事件一欄，instance是imagesLoaded的例項
image是LoadingImage的例項

LoadingImage有兩個介面：

  1. LoadingImage.img返回載入img圖片的元素；

  2. LoadingImage.isLoaded返回圖片是否被成功載入。

imagesLoaded有一個介面

  1. imagesLoaded.images返回LoadingImage的陣列

相關文章