Geek Answers Handbook

Using pace.js when uploading added images

I wanted to use rate.js to show a progress bar while the downloaded files were loading, they provided an API, but I don't know how this 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 Pace.stop() .

I made a demo tablet for your convenience.

+2
javascript jquery hubspot
source share
1 answer

First you need to disable the tempo when loading the page using:

 "startOnPageLoad" : false

Also citing from the documentation for the pace:

The elements displayed on the screen allow us to decide that the page has been displayed.

So, we can say that loading the "image" should successfully complete the pace:

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

Download the pace with these parameters specified in the script tag:

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

Now just call Pace.restart () every time you click the "Download Image" link.

No need to call Pace.stop (). (it automatically detects that #image has finished loading)

Updated plunk

+6
source share

More articles:


All Articles