在加载所有图像后触发事件 - imagesloaded.js

在加载所有图像后触发事件 - imagesloaded.js

版本:

浏览量:66

最后更新:2021-09-10

应用标签:MAC 软件Jquery插件

推荐指数:

详细信息

imagesloaded.js 是一个 jQuery 插件,允许您在 DOM 中的所有图像(和/或背景图像)成功加载后运行代码。

该插件的一个典型用例是延迟图像滑块或幻灯片的渲染,直到所有图像都加载完毕。

如何使用它:

1.加载jQuery后插入JavaScript文件jquery.imagesloaded.js。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.imagesloaded.js"></script>

2.插件支持img标签和背景图片。

<h2>Image</h2>
<img src="https://source.unsplash.com/16rU0VGwYWQ/1200x600" />
<h2>Background Image</h2>
<div class="box">
  Image Loaded!
</div>
.box {
  height: 600px;
  background-image: url(https://source.unsplash.com/DnWCpjQ_CbU/1200x700);
  background-position: 50% 50%;
  background-size: cover;
};

3.all-images-loaded触发时执行函数

$(document).on('all-images-loaded',function(){
  alert('All Images Are Loaded')
})

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。