javascript 使用pace.js 加载附加图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20120029/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using pace.js on loading appended images
提问by Jürgen Paul
I wanted to use pace.js to show a progress bar while the appended images are being loaded, they provided an API but I have no idea how it works.
我想使用 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();
});
});
I used it with desandro/imagesloadedto call Pace.stop()but I don't see any progress bars.
我将它与desandro/imagesloaded一起使用来调用，Pace.stop()但我没有看到任何进度条。
I made a demo plunkfor your convenience.
为了您的方便，我做了一个演示。
回答by Bolaka
You first need to disable pace on page load using:
您首先需要使用以下方法禁用页面加载速度：
"startOnPageLoad" : false
Also quoting from pace documentation:
还引用了速度文档：
Elements being rendered to the screen is one way for us to decide that the page has been rendered.
元素被渲染到屏幕是我们确定页面已经被渲染的一种方式。
So we can say that loading of 'image' should successfully complete the pace progress:
所以我们可以说'image'的加载应该成功完成步调进度：
"elements": {
"selectors": ["#image"] // assign id="image" to img
}
Load the pace with these options provided in script tag:
使用脚本标签中提供的这些选项加载速度：
data-pace-options='{ "elements": { "selectors": ["#image"] }, "startOnPageLoad": false }'
Now just call Pace.restart() every time click on link 'Load Image'.
现在每次点击链接“加载图像”时只需调用 Pace.restart()。
No need to call Pace.stop(). (it automatically detects that #image is done loading)
无需调用 Pace.stop()。（它会自动检测 #image 已完成加载）
Updated plunk
更新的plunk
