使用pace.js加载附加图像 [英] Using pace.js on loading appended images

问题描述

我想在加载附加图片时使用pace.js来显示进度条，他们提供了一个API，但我不知道它是如何工作的。

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();
  });
});

我用 desandro / imagesloaded 来调用 Pace.stop（）但我看不到任何进度条。

I used it with desandro/imagesloaded to call Pace.stop() but I don't see any progress bars.

为方便起见，我制作了演示插件。 p>

I made a demo plunk for your convenience.

推荐答案

首先需要使用以下命令禁用页面加载速度：

You first need to disable pace on page load using:

"startOnPageLoad" : false

同时引用起搏文档：

呈现给屏幕的元素是我们判断页面已被渲染的一种方式。

Elements being rendered to the screen is one way for us to decide that the page has been rendered.

所以我们可以说加载'image'应该会成功完成步伐的进展：

So we can say that loading of 'image' should successfully complete the pace progress:

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

加载pac e使用脚本标记中提供的这些选项：

Load the pace with these options provided in script tag:

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

现在只需致电Pace.restart （）每次点击加载图片链接。

Now just call Pace.restart() every time click on link 'Load Image'.

无需致电Pace.stop（）。 （它会自动检测到#image已完成加载）

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

更新插入

这篇关于使用pace.js加载附加图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！