2

我想在加载附加图像时使用 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()，但我没有看到任何进度条。

为了您的方便，我做了一个演示。

4

1 回答 1

6

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

"startOnPageLoad" : false

还引用了步伐文档：

渲染到屏幕上的元素是我们确定页面已被渲染的一种方式。

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

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

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

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

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

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

更新plunk

于 2013-12-11T07:47:22.160 回答