国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

EasonTyler / 3543人閱讀

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

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

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

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

安裝方式

npm

npm install imagesloaded

Bower

bower install imagesloaded --save

載入

配置方式 
// jQuery配置方式
$("#container").imagesLoaded( function() {
  // 圖片加載后執(zhí)行的方法
});

$("#container").imagesLoaded( {
     // 屬性配置
  },
  function() {
     // 圖片加載后執(zhí)行的方法
  }
);

// javaScript配置方式
var imgLoad = imagesLoaded( "#container", function() {
    // 圖片加載后執(zhí)行的方法
});
全部事件 
$("#container").imagesLoaded()
  .always( function( instance ) {
    console.log("圖片已全部加載，或被確認(rèn)加載失敗");
  })
  .done( function( instance ) {
    console.log("圖片全部加載成功");
  })
  .fail( function( instance ) {
    console.log("圖片已全部加載，且至少一個圖片加載失敗");
  })
  .progress( function( instance, image ) {
    console.log("每張圖片加載完");
    var result = image.isLoaded ? "loaded" : "broken";
    console.log( "加載結(jié)果 " + 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");
});
參數(shù)

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

LoadingImage有兩個接口：

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

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

imagesLoaded有一個接口

imagesLoaded.images返回LoadingImage的數(shù)組

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/91122.html

相關(guān)文章

  • 推薦JS插件：imagesLoaded，監(jiān)測圖片加載情況并提供相應(yīng)的事件（加載成功/失敗）

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

    atinosun 評論0 收藏0

  • 瀑布流插件Masonry的配置和使用

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

    waterc 評論0 收藏0

  • 瀑布流插件Masonry中文文檔【翻譯】

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

    soasme 評論0 收藏0

  • 一個簡單的滑動動畫廣告項目

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

    luzhuqun 評論0 收藏0

  • 一個簡單的滑動動畫廣告項目

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

    FrozenMap 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<