使用pace.js加载附加图像

问题描述

我想在加载附加图片时使用pace.js来显示进度条，他们提供了一个API，但我不知道它是如何工作的。

I wanted to use pace.js to show a progress bar while the appended images are being loaded, they provided an API but I have no idea how it works.

$('#loadImg').click(function() {
  Pace.start();
  var $con = $('#content');
  $con.append('<img src="http://lorempixel.com/500/500/">').imagesLoaded(function() {
    console.log('done!');
    Pace.stop();
  });
});

我用来调用 Pace.stop（）但我看不到任何进度条。

I used it with desandro/imagesloaded to call Pace.stop() but I don't see any progress bars.

为方便起见，我制作了。 p>

I made a demo plunk for your convenience.

推荐答案

首先需要使用以下命令禁用页面加载速度：

You first need to disable pace on page load using:

"startOnPageLoad" : false

同时引用起搏文档：

所以我们可以说加载'image'应该会成功完成步伐的进展：

So we can say that loading of 'image' should successfully complete the pace progress:

"elements": { 
    "selectors": ["#image"] // assign id="image" to img
}

加载pac e使用脚本标记中提供的这些选项：

Load the pace with these options provided in script tag:

data-pace-options='{ "elements": { "selectors": ["#image"] }, "startOnPageLoad": false }'

现在只需致电Pace.restart （）每次点击加载图片链接。

Now just call Pace.restart() every time click on link 'Load Image'.

无需致电Pace.stop（）。 （它会自动检测到#image已完成加载）

No need to call Pace.stop(). (it automatically detects that #image is done loading)

更新

这篇关于使用pace.js加载附加图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！