使用pace.js加載附加圖像

Question

我想使用pace.js來顯示進度條，而附加的圖像正在加載，他們提供了一個API，但我不知道它是如何工作的。

$('#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()，但我沒有看到任何進展吧。

爲了您的方便，我做了一個demo plunk。

Answer 1

首先，您需要使用在頁面加載禁用的步伐：

元素被渲染到屏幕是由我們決定，該頁面的一種方法：

"startOnPageLoad" : false 

從步伐文檔還引用已呈現。

因此，我們可以說「形象」的那個負荷應成功完成的步伐進展：

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

負載在script標籤提供這些選項的步伐：

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

現在只需每次點擊鏈接'加載圖像'時調用Pace.restart（）。

不需要調用Pace.stop（）。 （它會自動檢測#image完成加載）

更新plunk