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:
"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'.
No need to call Pace.stop(). (it automatically detects that #image is done loading)
Updated plunk