圖片加載插件imagesLoaded的配置和使用

EasonTyler 發布于2019-08-22 10:42 / 3560人閱讀

摘要：是一個圖片加載插件能夠監測圖片的加載狀態，表明了這款插件的實用性。如果你希望在圖片加載完成后做些什么。或在圖片加載失敗后能有補救措施，這款插件會很有用處。需要注意的是，如果有新添加的元素，要在元素添加完后重新設置插件，否則不會監測新元素。

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

JavaScript is all like "You images done yet or what?"

如果你希望在圖片加載完成后做些什么。或在圖片加載失敗后能有補救措施，這款插件會很有用處。
需要注意的是，如果有新添加的元素，要在元素添加完后重新設置插件，否則不會監測新元素。

安裝方式

npm

npm install imagesloaded

Bower

bower install imagesloaded --save

載入

配置方式

// 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有兩個接口：

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

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

imagesLoaded有一個接口

imagesLoaded.images返回LoadingImage的數組

云服務器 GPU云服務器 linux圖片的加載 js實現數據的懶加載圖片如何使用web登陸和配置防火墻? js視頻預加載插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/91122.html

推薦JS插件：imagesLoaded，監測圖片加載情況并提供相應的事件（加載成功/失敗）

摘要：為了保證在拿到圖片高度，也即圖片加載完成后再進行排列，我根據的推薦，選用了這一款插件。另外，在做一些圖片加載效果的時候也可以用到，比如說圖片未加載完成之前放個圖，加載失敗時放個錯誤提示什么的都很方便呢。慣例，首先貼上imagesLoaded的官方網址：http://imagesloaded.desandro.com/ 第一次知道imagesLoaded這個插件是在做瀑布流布局時，當時...

atinosun 2019-08-22 10:59 評論0 收藏0
瀑布流插件Masonry的配置和使用

摘要：是最流行的瀑布流插件之一，配置簡單，功能強大，在上收獲了。如果你想使用瀑布流提升網站體驗，將是不錯的選擇。瀑布流，又稱瀑布流式布局。需要注意的是，如果你需要加載圖片，不會在圖片加載完后重新布局，這可能會影響你的布局效果，建議配合使用插件。 Masonry是最流行的瀑布流插件之一，配置簡單，功能強大，在Github上收獲了1w+ stars。如果你想使用瀑布流提升網站體驗，Masonry...

waterc 2019-08-22 10:42 評論0 收藏0
瀑布流插件Masonry中文文檔【翻譯】

摘要：本位為官方文檔翻譯，原始鏈接安裝下載下載壓縮或未壓縮的壓縮未壓縮在直接飲用文件。排列未加載完成的圖片時會導致元素的重疊，可以解決這個問題。布局組件尺寸尺寸配置項和可以可以設置組件的列寬和間距。增加移除控件在瀑布流末尾增加新控件并重排。本位為Masonry官方文檔翻譯，原始鏈接安裝Install 下載下載壓縮或未壓縮的masonry masonry.pkgd.min.js （壓縮...

soasme 2019-08-22 15:18 評論0 收藏0
一個簡單的滑動動畫廣告項目

摘要：公司接了一個當下很火熱的，網上有各種模板和造好輪子付費使用的滑動廣告的項目。其中核心方法是，筆者猜測方法里應該是先取出本里的所有類名含有的元素，運用的方法取出動畫的三個屬性值，然后加上以觸發動畫。公司接了一個當下很火熱的，網上有各種模板和造好輪子付費使用的滑動廣告的項目。網上的模板大部分類似于PPT，而且文字量很大，大部分都是文字的淡入/淡出效果，想做一個稍微復雜點的。研究了一下，...

luzhuqun 2019-08-22 10:47 評論0 收藏0
一個簡單的滑動動畫廣告項目

摘要：公司接了一個當下很火熱的，網上有各種模板和造好輪子付費使用的滑動廣告的項目。其中核心方法是，筆者猜測方法里應該是先取出本里的所有類名含有的元素，運用的方法取出動畫的三個屬性值，然后加上以觸發動畫。公司接了一個當下很火熱的，網上有各種模板和造好輪子付費使用的滑動廣告的項目。網上的模板大部分類似于PPT，而且文字量很大，大部分都是文字的淡入/淡出效果，想做一個稍微復雜點的。研究了一下，...

FrozenMap 2019-08-01 16:03 評論0 收藏0