图片加载插件imagesLoaded配合jquery使用

背景：之前做项目的时候碰到了这么一个需求，在商品详情页顶部商品主图旁设置一个按钮，点击该按钮页面滚动到评论部分，想着很简单就直接用了scrollToElement(...)，看起来好像没问题，但因为按钮到评论之间有着大量图片，这导致了如果这些占有位置的图片的加载过程没有结束，就可能滚动到错误的位置，除非都加载完成，即使最后的结果是失败。
要解决这个问题，我想到的解决思路是当图片都加载完以后才给按钮绑定事件，怎么知道图片都加载完？就要用到imagesLoaded插件其中的always事件，参考官方文档的内容如下：

    $('#container').imagesLoaded()

  .always( function( instance ) {

    console.log('图片已全部加载，或被确认加载失败');

  })

  .done( function( instance ) {

    console.log('图片全部加载成功');

  })

  .fail( function( instance ) {

    console.log('图片已全部加载，且至少一个图片加载失败');

  })

  .progress( function( instance, image ) {

    console.log('每张图片加载完');

    var result = image.isLoaded ? 'loaded' : 'broken';

    console.log( '加载结果 ' + result + ' 图片地址 ' + image.img.src );

  });

然后就用第一个，代码如下

 $(selector).imagesLoaded()

  .always( function( instance ) {

    //事件绑定代码
    ......
  })

最后成功解决，另外如果是原生js的话就用如下代码代替：

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 );

参考：
官网：https://imagesloaded.desandro.com/
https://www.yingzhiku.cn/html/2018/jswd_0812/109.html