javascript - Using pace.js on loading appended images - Stack Overflow

admin管理员组

文章数量:1355559

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="/">').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.

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./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.

• javascript
• jquery
• hubspot

Share Improve this question Follow asked Nov 21, 2013 at 11:41 Jürgen PaulJürgen Paul 15k2828 gold badges9696 silver badges136136 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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 plete 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

本文标签： javascriptUsing pacejs on loading appended imagesStack Overflow