推荐插件:imagesLoaded,监测图片加载情况并提供相应的事件(加载成功/失败)
来源:互联网 发布:linux waitpid 编辑:程序博客网 时间:2024/04/29 02:07
惯例,首先贴上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除了能监测<img>
外,还能监测用css定义的background-image,具体见:http://imagesloaded.desandro.com/#background
除了瀑布流需要用到imagesLoaded,我最近还发现在利用html5 file api读取本地图片的时候也需要用到imagesLoaded,道理同瀑布流。另外,在做一些图片加载效果的时候也可以用到,比如说图片未加载完成之前放个loading图,加载失败时放个错误提示什么的都很方便呢。
0 0
- 推荐插件:imagesLoaded,监测图片加载情况并提供相应的事件(加载成功/失败)
- 检测图片是否正确加载的js插件-imagesLoaded
- imagesLoaded-检测图片是否正确加载的js插件
- imagesLoaded-检测图片是否正确加载的js插件
- imagesLoaded图片预加载
- 预加载(加载中) + 推荐移动端网页使用的图片懒加载(预加载)插件
- 原生JS实现AJAX、JSONP及DOM加载完成事件,并提供对应方法
- 原生JS实现AJAX、JSONP及DOM加载完成事件,并提供对应方法
- JavaScript开发——加载在线图片完整功能实现方法(正在加载-加载成功-加载失败)
- ionic开发——加载在线图片完整功能实现方法(正在加载-加载成功-加载失败)
- 瀑布流可以传入自己的参数 主要取决于红色字体部分infinitescroll 等待图片加载完imagesloaded.pkgd.js
- webbrower.Navigate()加载失败的一种情况
- 转载-当图片加载失败或者没有的情况下显示默认图片
- 当图片加载失败或者没有的情况下显示默认图片
- 图片加载完成事件(jQuery插件)
- jira出现加载插件失败情况JIRA Startup Failed
- 加载网络图片所显示的转圈效果及加载成功前与失败后所显示的图标
- Eclipse加载插件失败
- 利用Codeigniter框架实现student信息系统站点的动态发布
- AngularJS中Provider、Service和Factory之间的不同
- android编译相关
- Flash动画制作视频教程
- 三、RSA
- 推荐插件:imagesLoaded,监测图片加载情况并提供相应的事件(加载成功/失败)
- Links - Azure App Service Plans
- iOS 使用CIFilter生成二维码
- TextView中字符串string部分指定字符变色、加重点色
- 查看java内存情况命令
- VS2012 创建和使用DLL
- BZOJ 3223 文艺平衡树 【Splay】
- CentOS的自动补全
- Java中的instanceof关键字