waitForImages 给图片附加加载成功的回调函数 - 文章教程

waitForImages 给图片附加加载成功的回调函数

发布于 2020-05-01 字数 4406 浏览 1383 评论 0

在加载后代图像后提供有用的回调,waitForImages 同时支持 CSS 引用的图像,如 background-image 属性,以及在元素属性( 如 srcset ) 中引用的图像。 属性中引用的图像也可以是一个逗号分隔的图像列表。

waitForImages 给图片附加加载成功的回调函数

如果不正确地设置元素的元素尺寸/偏移量,它可能会很有用,因为它还没有计算出它们的后代。

支持你可能关注的所有浏览器。

下载

你可以直接下载源代码

或者使用 CDN 加速:

亦或者通过包管理器安装:

bower install waitForImages
npm install jquery.waitforimages

当然,这些需要在 jQuery 是可以得到的。当前版本至少应该得到jQuery1.8或更早版本的支持。如果您发现不兼容问题,请查看之前的标记版本。

使用方法

有两种使用 WaitForImage 的方法:使用标准回调系统,以前是唯一的 API,或使用 Promise()。

标准

只要提供一个回调函数,一旦加载了所有子代映像,它就会被调用。

$('selector').waitForImages(function() {
  // All descendant images have loaded, now slide up.
  $(this).slideUp();
});

您还可以使用 jQuery API。

$('selector').waitForImages().done(function() {
  // All descendant images have loaded, now slide up.
  $(this).slideUp();
});

在回调中,this 是对以下集合的引用 waitForImages() 被调用。

先进

您可以将第二个函数作为回调传递,该回调将对加载的每个图像进行调用,并将一些信息作为参数传递。

$('selector').waitForImages(function() {
  alert('All images have loaded.');
}, function(loaded, count, success) {
   alert(loaded + ' of ' + count + ' images has ' + (success ? 'loaded' : 'failed to load') +  '.');
   $(this).addClass('loaded');
});

然后,使用 jQuery API,您可以使用 progress() 方法来知道何时加载了单个图像。

$('selector').waitForImages().progress(function(loaded, count, success) {
  alert(loaded + ' of ' + count + ' images has ' + (success ? 'loaded' : 'failed to load') +  '.');
  $(this).addClass('loaded');
});

还可以将第三个参数设置为 true 如果希望插件在集合和所有子代元素上迭代,请检查 CSS 中引用的图像,默认情况下,它将查看 background-image, list-style-image, border-image, border-corner-imagecursor 资源。如果它找到任何,他们将被视为一个后代的形象。

加载成功或者加载失败将调用回调函数。检查第三个参数以确定图像加载的成功与否。它将是 true 如果图像加载成功。

如果您想跳过第一个参数,请传递 $.noop 或者将一个对象文字传递给插件,而不是单独地传递参数。

$('selector').waitForImages({
  finished: function() {
    // ...
  },
  each: function() {
     // ...
  },
  waitForAll: true
});

要将其与 Promise API 一起使用,只需传递一个参数,即 waitForAll.

$('selector').waitForImages(true).done(function() {
  // ...
});

您还可以自己设置可能包含图像引用的CSS属性。只需为插件分配一个属性数组即可。

$.waitForImages.hasImgProperties = ['backgroundImage'];

还公开了两个自定义选择器,img:has-srcimg:uncached,(都与 img),允许您选择 img 元素具有有效的 src 属性,或者浏览器已分别缓存的属性。

$('img').not(':has-src').remove();
$('img:uncached').attr('title', 'Loading Image');

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0