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 brokenfor ( 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 appapp: '../'} });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
转自:imagesLoaded-检测图片是否正确加载的js插件
imagesLoaded-检测图片是否正确加载的js插件相关推荐
- 前端判断img图片未能正确加载时显示一个默认图片。img标签onerror事件设置了本地默认图片还是不显示的问题
前端img标签中引用后端交给的图片地址时,有可能这个路径下图片被删除或者损坏了,那么页面在加载img图片时就显示为,太丑了. img标签有个onerror事件,就是当图片未被正确加载的时候调用此事件, ...
- Delphi FMX正确加载图片最大限度减少内存占用(之一TBitmapSurface)
Delphi FMX正确加载图片最大限度减少内存占用(之一TBitmapSurface) 国庆前,无意间发现App内存占用陡增,发现是几张4K图片(7680x4320像素)加载引发的(TImage.B ...
- Python语言学习:利用python获取当前/上级/上上级目录路径(获取路径下的最后叶目录的文件名、合并两个不同路径下图片文件名等目录/路径案例、正确加载图片路径)之详细攻略
Python语言学习:利用python获取当前/上级/上上级目录路径(获取路径下的最后叶目录的文件名.合并两个不同路径下图片文件名等目录/路径案例.正确加载图片路径)之详细攻略 目录 利用python ...
- Glide 如何实现正确加载图片而没有错位
我们在平时的项目使用下面的代码 GlideApp.with(context).load(url).into(imageView); 当我们在常见的列表界面中(如 recycleview 实现的列表), ...
- Delphi FMX正确加载图片最大限度减少内存占用(之二TImageList)
Delphi FMX正确加载图片最大限度减少内存占用(之二TImageList) 继上篇<Delphi FMX正确加载图片最大限度减少内存占用(之一TBitmapSurface)>之后,我 ...
- 未能加载文件或程序集_完美解决未能正确加载Visual C++资源编辑器包问题
问题:在使用VS2010过程中,出现未能正确加载"Visual C++ Resource Editor Package"的错误提示,同时工程的资源文件不能打开,出现加载失败. 原因 ...
- 移动端图片居多,加载过慢,使用延迟加载|懒加载( lazyload.js)
文章目录[隐藏] Lazy Load 插件原理 开始使用 lazyload.js lazyload.js 高级使用方法: 更周全的做法 提前加载 自定义触发事件 自定义显示效果 把图像插入某个容器 加 ...
- 图片瀑布流加载和购物车
图片瀑布流加载 注释中为详细注释 动态添加元素 // 创建图片数组方便后续添加图片路径时使用var img = ["1.jpg", "2.jpg", " ...
- 性能优化——图片压缩、加载和格式选择
本文首发于政采云前端团队博客:性能优化--图片压缩.加载和格式选择 https://www.zoo.team/article/images-compress 前言 相信大家都听说过 "258 ...
最新文章
- PHP 接收 UDP包_PHP早已不是十年前的鸟样!!!
- 【Web安全】利用burp抓包和CSRF伪造进入admin真实后台
- 数字图像处理:第三章 灰度直方图
- 【移动战略说·第十六期】创业者面临的机遇与挑战(杭州站)
- php怎么样sphinx,php使用sphinx
- 弹出框设置在页面居中
- ❤️六W字《计算机基础知识》(六)(建议收藏)❤️
- 7-1 矩阵A乘以B (30 分)
- java帧结构_Java虚拟机运行时栈帧结构--《深入理解Java虚拟机》学习笔记及个人理解(二)...
- 【动态规划】LeetCode 377. Combination Sum IV
- 免费推广网站实例(珍藏版)
- UVALive - 4487 HDU3234 UVA12232 【带权并查集】 非常好的一道题!!!
- python语言count什么意思_python中count函数是什么意思?
- Flutter tween动画
- C++:亲戚(relation)
- 怎么配置android远程服务器地址,在 Android studio 中 配置Gradle 进行 “动态编译期间,指定 远程服务器地址 ,生成多个安装包”...
- pwn libc找偏移的在线网站
- .9图片设置不拉伸的区域被拉伸的问题
- java基于springboot家庭水电燃气网上交费系统
- 这几个小妙招让你学会如何压缩图片大小
热门文章
- Little Elephant and Shifts(CF-220C)
- android 按钮顶级效果_人人都可写代码-Android零基础编程-相对布局11
- 特征缩放的效果:从词袋到 TF-IDF
- appinventor离线版下载_Chrome 离线安装包下载
- 为什么要使用消息队列
- (STTN)Learning Joint Spatial-TemporalTransformations for Video Inpainting
- torch.full 【输出大小为size内容为填充张量为fill_value的张量】
- [流体输配管网]古罗马渡槽从水源到城市的落差估计
- elementUI响应式布局@media:基于断点的隐藏类
- u盘被保护怎样解除?(第十招)