使用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()但我没有看到任何进度条.

为了方便起见,我做了一个演示插件.

Answer 1

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

"startOnPageLoad" : false

同时引用起搏文件:

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

所以我们可以说加载"图像"应该可以成功完成步伐的进展:

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

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

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

现在只需点击链接'加载图像'即可调用Pace.restart().

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

更新了plunk