Using pace.js on loading appended images

Question

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.

$('#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/imagesloaded to call Pace.stop() but I don't see any progress bars.

I made a demo plunk for your convenience.

Answer 1

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