imagesLoaded-画像が正しく読み込まれ、plug-jsを検出します
Imagesloaded Picture Is Loaded Correctly Detect Plug Js
簡単なチュートリアル
imagesLoaded jsプラグインは、ページが画像にロードされているかどうかを検出するために使用されます。 imagesLoadedは非常に便利なプラグインです。ページの一部の画像がデフォルトで読み込まれていない場合、赤い十字または画像の代替テキストが表示されますが、imagesLoadedは画像の画像置換セットを読み込むことができません。
インストール
あなたはできる バウアー または 海抜 巨人分類フィルタリングおよびソートプラグインをインストールします。
imagesloaded.pkgd.jsまたは、ダウンロードしたパッケージを直接使用するimagesloaded.pkgd.min.jsファイルの圧縮バージョンcallback。ページで紹介することができます。
always指示
img- 素子：このパラメーターは、要素、ノードリスト、または配列セレクター文字列です。
- 折り返し電話：ロード後の画像コールバックイベント。
use trueコールバック関数とバインディング.always()イベントは同じです（イベントの内容の説明を参照してください）。
.done()イベント
imagesLoadedは起動イベントソースであり、イベントのイベントリスナーをバインドできます。
.fail()常に
.progress()すべての画像がロードされたときにトリガーされ、確認または破損します。インスタンス：オブジェクトのImagesLoadedインスタンス。
完了
imagesloaded.pkgd.js画像が壊れていない場合、すべての画像のトリガーが正常に読み込まれています。不合格
baseUrlすべての画像に読み込まれている画像が壊れたときに少なくとも1つの画像がトリガーされます。進捗
bower_components各画像がロードされた後にトリガーされます。- インスタンス：オブジェクトのImagesLoadedインスタンス。
- 画像：画像をロードするときにオブジェクトのオブジェクトインスタンスをロードします。
属性
LoadingImage.img
img：
bower install imagesloaded npm install imagesloaded要素。
LoadingImage.isLoaded
ブール値：画像が正常にロードされたとき
。imagesLoaded.images
すべての画像を検出するオブジェクトのLoadingImageインスタンス。
imagesLoaded( elem, callback ) // you can use `new` if you like new imagesLoaded( elem, callback )
jQueryと組み合わせて使用する
ページで紹介する場合 jQuery 、ImagesLoadedはとして使用できます jQueryプラグイン 使用するには。
// as the element imagesLoaded( document.querySelector('#container'), function( instance ) { console.log('all images are loaded') }) // string as the selector imagesLoaded( '#container', function() {...}) // multiple elements var posts = document.querySelectorAll('.post') imagesLoaded( posts, function() {...})jQuery延期
jQueryプラグインとして使用した場合に返されます jQuery遅延オブジェクト 。前の方法と同じイベントの使用を使用できます
var imgLoad = imagesLoaded( elem ) function onAlways( instance ) { console.log('all images are loaded') } // bind with .on() imgLoad.on( 'always', onAlways ) // unbind with .off() imgLoad.off( 'always', onAlways )、imgLoad.on( 'always', function( instance ) { console.log('ALWAYS - all images have been loaded') })、imgLoad.on( 'done', function( instance ) { console.log('DONE - all images have been successfully loaded') }) with imgLoad.on( 'fail', function( instance ) { console.log('FAIL - all images loaded, at least one is broken') })。imgLoad.on( 'progress', function( instance, image ) { var result = image.isLoaded ? 'loaded' : 'broken' console.log( 'image is ' + result + ' for ' + image.img.src ) })RequireJS
imagesLoaded缶 RequireJS 共に働く。要求することができます
var imgLoad = imagesLoaded('#container') imgLoad.on( 'always', function() { console.log( imgLoad.images.length + ' images loaded' ) // detect which image is broken for ( var i = 0, len = imgLoad.images.length i 。$('#container').imagesLoaded( function() { // images have loaded })またはによって バウアー 依存関係を管理するため。 will
$('#container').imagesLoaded() .always( function( instance ) { console.log('all images loaded') }) .done( function( instance ) { console.log('all images successfully loaded') }) .fail( function() { console.log('all images loaded, at least one is broken') }) .progress( function( instance, image ) { var result = image.isLoaded ? 'loaded' : 'broken' console.log( 'image is ' + result + ' for ' + image.img.src ) }) Set as requirejs( [ 'path/to/imagesloaded.pkgd.js', ], function( imagesLoaded ) { imagesLoaded( '#container', function() { ... }) })次に、アプリの作業パスへのパスを設定します。requirejs.config({ baseUrl: 'bower_components/', paths: { // path to your app app: '../' } }) requirejs( [ 'imagesloaded/imagesloaded', 'app/my-component.js' ], function( imagesLoaded, myComp ) { imagesLoaded( '#container', function() { ... }) })Browserify
imagesLoaded缶 Browserify 共に働く。
npm install imagesloaded --save
var imagesLoaded = require('imagesloaded') imagesLoaded( elem, function() {...} )ダウンロード： 201503141735
元の： http://www.htmleaf.com/jQuery/Image-Effects/201503141520.html
公式サイト： http://imagesloaded.desandro.com/
プロジェクトアドレス： https://github.com/desandro/imagesloaded