在加载附加图像时使用pace.js

Question

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

$('#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文档：

呈现到屏幕上的

元素是我们确定页面是否已经呈现的一种方式。

所以我们可以说，'image‘的加载应该成功地完成了进度进度：

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

使用脚本标记中提供的以下选项加载pace：

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

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

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

更新的plunk