首页 > 其他分享 >imagesLoaded插件

imagesLoaded插件

时间:2023-04-17 10:32:13浏览次数:36  
标签:jQuery 插件 Object broken images imagesLoaded 图片


imagesLoaded插件是一个在图片加载成功后才做一系列操作

官方网站:https://github.com/desandro/imagesloaded/

使用语法:



$(selector).imagesLoaded( [ callback ] );



 ImagesLoaded可以呼吁一个元素中的图像,图像直接,或两者的结合。

selector选择器支持:

1.直接为图片

2.内嵌图片

3.两者综合使用

官方例子:


// Calling on an element that may contain images
$('#content').imagesLoaded(fn);

// Calling on image elements directly
$('img').imagesLoaded(fn);

// Combination of both
$('#content, #gallery > img').imagesLoaded(fn);



 callback可以是一个函数也可以是一个map

callback为一个函数

该函数接受3个参数

  • $images: Object jQuery object with all images 所有的图片
  • $proper: Object jQuery object with properly loaded images  加载成功的图片
  • $broken: Object jQuery object with broken images 加载失败的图片

官方例子:


$('#my-container, .article img').imagesLoaded( function( $images, $proper, $broken ) {
    console.log( $images.length + ' images total have been loaded' );
    console.log( $proper.length + ' properly loaded images' );
    console.log( $broken.length + ' broken images' );
});



 

 

 

 

 

 

标签:jQuery,插件,Object,broken,images,imagesLoaded,图片
From: https://blog.51cto.com/u_16071779/6194518

相关文章

  • struts2整合convention插件
    <?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEstrutsPUBLIC"-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.1//EN""http://struts.apache.org/dtds/struts-2.1.dtd"><struts><consta......
  • gitee github 左侧栏树形显示插件 Octotree codetree 浏览器插件
    起因看到一位仁兄用gitee做仓库https://gitee.com/zhengqingya/java-developer-document然后左侧栏挺方便(抖音视频)下载chrome扩展市场搜octotree用于githubcodetree用于gitee双核浏览器扩展市场搜octotree用于githubgitcodetree用于gitee......
  • MySQL McAfee审计插件Audit Plugin安装
     MySQLMcAfee审计插件AuditPlugin安装 官网下载:https://github.com/trellix-enterprise/mysql-audit/releases官方文档:https://github.com/trellix-enterprise/mysql-audit/wiki防爬虫:https://www.cnblogs.com/PiscesCanon/p/17324406.html  注意要对应你的数据库软......
  • Dynamic 导入插件解决方案包,提示: Assembly must be registered in isolation 错误
    错误信息如下:<s:Envelopexmlns:s="http://schemas.xmlsoap.org/soap/envelope/"><s:Body><s:Fault><faultcode>s:Client</faultcode><faultstringxml:lang="zh-CN">Actionfailedforassembly'AccountManage,V......
  • Visual Studio Code 常见的配置、常用好用插件以及【vsCode 开发相应项目推荐安装的插
    一、VsCode常见的配置1、取消更新把插件的更新也一起取消了2、设置编码为utf-8:默认就是了,不用设置了3、设置常用的开发字体:Consolas,默认就是了,不用设置了字体对开发也很重要,不同字体,字母形态都不太一样,尤其是标点符号,逗号和分号的区分,有的字体看着这两者就很像......
  • 网页滚动体验,IScroll滚动插件,你安装了类似的滚动页面插件吗
    IScroll是一款基于JavaScript的插件,用于在网页中实现平滑滚动效果。这个插件可以帮助用户创建回到页面顶部和底部的按钮、生成页面导航快照,以及设置滚动时间等功能,从而提升网页的用户体验。IScroll的特点在于,它能够平滑地滚动网页内容,而不会像传统的滚动条那样跳跃。此外,该插件可以......
  • 网页滚动体验,IScroll滚动插件,你安装了类似的滚动页面插件吗
    IScroll是一款基于JavaScript的插件,用于在网页中实现平滑滚动效果。这个插件可以帮助用户创建回到页面顶部和底部的按钮、生成页面导航快照,以及设置滚动时间等功能,从而提升网页的用户体验。IScroll的特点在于,它能够平滑地滚动网页内容,而不会像传统的滚动条那样跳跃。此外,该插......
  • Vue3组合API自动引入插件
    插件名:unplugin-auto-importurl:https://github.com/antfu/unplugin-auto-import安装1、下载插件npmiunplugin-auto-import-D2、配置vite.config.tsimportvuefrom'@vitejs/plugin-vue'import{defineConfig}from'vite'//引入插件,因为我使用的vite+ts,所以这里引......
  • java maven-plugin-shade插件 Maven生成的jar运行出现“没有主清单属性”
    命令窗口运行jar,提示“没有主清单属性”  2.1分析问题在打包构建的jar目录内,可以看到有一个MANIFEST.MF文件,如图所示:该文件就是jar运行时要查找的清单目录,其中主清单数据,就是我们要运行的主类(函数入口main所在的类);提示缺少主清单属性,就是文件中少了主清单属性如下所示:正......
  • Dynamics 365 安装插件注册工具 PluginRegistration
    1.创建文件夹,例:D:\Dynamics_365_Development_Tools\pluginsTool2.powershell进入D:\Dynamics_365_Development_Tools\pluginsTool3.运行下面指令(直接复制粘贴到PowerShell即可),运行完成后按回车[Net.ServicePointManager]::SecurityProtocol=[Net.SecurityProtocolType]::T......