javascript - 使用 pace.js 加载附加图像

Question

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

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

我将它与 desandro/imagesloaded 一起使用调用 Pace.stop() 但我没有看到任何进度条。

我做了一个demo plunk为了您的方便。

Answer 1

您首先需要使用以下方法禁用页面加载速度:

"startOnPageLoad" : false

同时引用自 pace 文档:

Elements being rendered to the screen is one way for us to decide that the page has been rendered.

所以我们可以说“图像”的加载应该成功完成进度:

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

使用脚本标签中提供的这些选项加载节奏:

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

现在每次单击“加载图像”链接时只需调用 Pace.restart()。

无需调用 Pace.stop()。 (它会自动检测到#image 已完成加载)

已更新 plunk