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

資訊專欄INFORMATION COLUMN

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

atinosun / 1633人閱讀

摘要：為了保證在拿到圖片高度，也即圖片加載完成后再進行排列，我根據的推薦，選用了這一款插件。另外，在做一些圖片加載效果的時候也可以用到，比如說圖片未加載完成之前放個圖，加載失敗時放個錯誤提示什么的都很方便呢。

慣例，首先貼上imagesLoaded的官方網址：http://imagesloaded.desandro.com/

第一次知道imagesLoaded這個插件是在做瀑布流布局時，當時選用的是masonry這個老牌瀑布流插件，imagesLoaded這個插件也是masonry官方推薦的，可能是同一伙人吧。具體場景是這樣的，我們的圖片寬度都是固定的，但高度不固定（瀑布流都是這樣的吧），但masonry在進行排列前就必須確定圖片的高度，而圖片在尚未加載完成前是無法得知高度的（其實也不是絕對，我那時后期就改成在上傳圖片的時候就記錄好圖片的高度）。為了保證masonry在拿到圖片高度，也即圖片加載完成后再進行排列，我根據masonry的推薦，選用了這一款imagesLoaded插件。

imagesLoaded可以搭配jquery使用，也可以用原生js來調用，這里方便起見（也比較直觀）就直接上jquery版的：

$("#container").imagesLoaded()
.always( function( instance ) {    //always事件，在所有圖片都加載完成（成功與否不論）時觸發
  console.log("all images loaded");
})
.done( function( instance ) {    //done事件，在所有圖片都加載成功時觸發
  console.log("all images successfully loaded");
})
.fail( function() {    //fail事件，在所有圖片都加載完成，并且至少有一張圖片加載失敗時觸發
  console.log("all images loaded, at least one is broken");
})
.progress( function( instance, image ) {    //progress事件，在每一張圖片加載完成時都觸發一次
  var result = image.isLoaded ? "loaded" : "broken";    //判斷當前圖片加載成功與否
  console.log( "image is " + result + " for " + image.img.src );
});

imagesLoaded除了能監測外，還能監測用css定義的background-image，具體見：http://imagesloaded.desandro.com/#background

除了瀑布流需要用到imagesLoaded，我最近還發現在利用html5 file api讀取本地圖片的時候也需要用到imagesLoaded，道理同瀑布流。另外，在做一些圖片加載效果的時候也可以用到，比如說圖片未加載完成之前放個loading圖，加載失敗時放個錯誤提示什么的都很方便呢。

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

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

相關文章

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

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

    EasonTyler 評論0 收藏0

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

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

    luzhuqun 評論0 收藏0

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

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

    FrozenMap 評論0 收藏0

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

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

    soasme 評論0 收藏0

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

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

    waterc 評論0 收藏0

發表評論

0條評論

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