imagesLoaded-检测图片是否正确加载的js插件

  简要教程

imagesLoaded是一款用于检测页面中的图片是否被加载的js插件。imagesLoaded是非常有用的插件，当你的页面中某幅图片没有被加载时，默认会显示一个红叉或图片alt文本，imagesLoaded可以将未加载的图片替换为你设置的图片。

 安装

你可以通过Bower或npm来安装giantess分类过滤和排序插件。

bower install imagesloaded npm install imagesloaded

或者直接使用下载包中的imagesloaded.pkgd.js文件及压缩版的imagesloaded.pkgd.min.js。在页面中将它引入即可。

< script src = "/path/to/isotope.pkgd.min.js" ></ script >

 使用方法

imagesLoaded( elem, callback ) // you can use `new` if you like new imagesLoaded( elem, callback )

• elem：该参数是元素，节点列表，数组或选择器字符串。
• callback：图片被加载后的回调事件。

使用callback回调函数和绑定always事件是一样的（看事件描述一节内容）。

// 作为元素 imagesLoaded( document.querySelector( '#container' ), function ( instance ) {    console.log( 'all images are loaded' ); }); // 作为选择器字符串 imagesLoaded( '#container' , function () {...}); // 多个元素 var posts = document.querySelectorAll( '.post' ); imagesLoaded( posts, function () {...});

 事件

imagesLoaded是一个事件发射源，你可以为事件绑定事件监听。

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 );

 always

imgLoad.on( 'always' , function ( instance ) {    console.log( 'ALWAYS - all images have been loaded' ); });

在所有图片被加载或确认broken时触发。

instance：imagesLoaded 实例对象。

 done

imgLoad.on( 'done' , function ( instance ) {    console.log( 'DONE  - all images have been successfully loaded' ); });

在所有图片被成功加载没有broken图片的时候触发。

 fail

imgLoad.on( 'fail' , function ( instance ) {    console.log( 'FAIL - all images loaded, at least one is broken' ); });

在所有图片被加载至少有一幅图片是broken图片的时候触发。

 progress

imgLoad.on( 'progress' , function ( instance, image ) {    var result = image.isLoaded ? 'loaded' : 'broken' ;    console.log( 'image is ' + result + ' for ' + image.img.src ); });

在每一幅图片都被加载之后触发。

• instance：imagesLoaded 实例对象。
• image：加载图片时的loading对象的实例对象。

 属性

 LoadingImage.img

img：img元素。

 LoadingImage.isLoaded

Boolean ：当图片被成功加载时为true。

 imagesLoaded.images

要检测的所有图片的LoadingImage实例对象。

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 < len; i++ ) {      var image = imgLoad.images[i];      var result = image.isLoaded ? 'loaded' : 'broken' ;      console.log( 'image is ' + result + ' for ' + image.img.src );    } });

 与jQuery结合使用

如果你在页面中引入的jQuery，imagesLoaded 可以作为一个jQuery插件来使用。

$( '#container' ).imagesLoaded( function () {    // images have loaded });

 jQuery Deferred

作为jQuery插件来使用时会返回一个jQuery Deferred object。你可以和前面使用事件的方法一样使用.always()、.done()、.fail()和.progress()。

$( '#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 );    });

 RequireJS

imagesLoaded 可以和RequireJS一起工作。你可以require imagesloaded.pkgd.js。

requirejs( [    'path/to/imagesloaded.pkgd.js' , ], function ( imagesLoaded ) {    imagesLoaded( '#container' , function () { ... }); });

或者可以通过Bower来管理依赖。将baseUrl设置为bower_components，然后将路径设置为你的app工作路径。

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 () {...} );

本文版权属于jQuery之家，转载请注明出处： http://www.htmleaf.com/jQuery/Image-Effects/201503141520.html