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

Question

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

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

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

下载

你可以直接下载源代码

• Production (minified)
• Development (unminified)

或者使用 CDN 加速：

• Hosted on CDNJS (minified)

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

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-image 和 cursor 资源。如果它找到任何，他们将被视为一个后代的形象。

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

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

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

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

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

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

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

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

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

相关链接

• https://github.com/alexanderdickson/waitForImages
• http://blog.alexanderdickson.com/