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() {...} );
相关推荐
imagesLoaded是一款用于检测页面中的图片是否被加载的js插件。imagesLoaded是非常有用的插件,当你的页面中某幅图片没有被加载时,默认会显示一个红叉或图片alt文本,imagesLoaded可以将未加载的图片替换为你设置的...
Vue.ImagesLoaded - 检测图片加载的VueJS指令
JavaScript is all like "You images done yet or what?" imagesloaded.desandro.com Detect when images have been loaded.
yii2-imagesLoaded-widget http://imagesloaded.desandro.com/作曲家.json " require " : { " xj/yii2-imagesLoaded-widget " : " * "},xj\imagesloaded\ ImagesLoadedAsset :: register ( $ this );
NULL 博文链接:https://liuna718-163-com.iteye.com/blog/1874687
vue-image-loader Vue渐进式图像加载插件本文位于:https://www.kevindesousa.me/vue-image-loader/安装$ npm install @kevinde vue-image-loader Vue渐进式图像加载插件本文位于:...image-loader/安装$ npm install @...
前端项目-jquery.imagesloaded,你的图像完成了还是什么?
前端自适应瀑布流插件
Vue.ImagesLoaded一个Vue.js 2.0伪指令,用于基于imagesLoaded检测何时加载了图像。当子容器图像加载到容器元素中时,此伪指令可获取回调。 与vue.i很好地配合使用Vue.ImagesLoaded一个Vue.js 2.0伪指令,基于...
React图像加载对事件系统的React进行绑定道具名称类型永远功能onProgress 功能失败功能完毕功能背景字符串/布尔用法示例// ES6import ImagesLoaded from 'react-images-loaded' ;// ES5const ImagesLoaded = require...
infinitescroll+imagesLoaded+Masonry,最完美三合一整合代码 使用的数据格式:JSON格式
NULL 博文链接:https://sunzhong1030.iteye.com/blog/1991667
这是一款简单实用的类似Masonry瀑布流的jQuery图片网格布局插件。该Masonry瀑布流布局简单易用,它通过imagesloaded来加载图片,并且可以非常方便的动态添加任意数量的图片到网格布局中。
imagefill.jsjQuery插件,用于使图像填充其容器(并居中) ( 请参阅演示和文档需要imagesLoaded- 有关此插件的无jQuery版本,请访问: : 关注合法的作者和版权(c)2013: ,具有MIT和GPL双重许可
图片加载 - 流星 meteor add iamkevingreen:imagesloaded 图像加载的流星包装 以前的流星包已经过时了,原作者似乎不再活跃在 git 上 ##用法: 有关 ImagesLoaded API 的更多信息:入门:
jquery实现瀑布流加载模式,通过此方式,可以实现页面无等待刷新,用户体现好!
相关的知识点:jquery的ready方法、$(“img”).error()、img的complete属性、插件imagesLoaded、事件委托、事件捕获和图片预加载的方法等 1. 图片加载失败替换为默认图片 1.1 给图片绑定error事件 当图片加载失败时...
。。。
。。。