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

同时引用速度文档：

呈现给屏幕的元素是我们决定页面已被渲染的一种方式。

所以我们可以说加载'image'应该可以成功地完成节奏进度：

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

使用脚本标记中提供的这些选项加快速度：

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

现在只需点击链接'加载图片'即可调用Pace.restart（）。

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

更新了plunk

使用pace.js加载附加图像

1 个答案: