當我們使用Less編寫樣式時，我們會想要在頁面加載完成后將生成的CSS應用于頁面。為了確保我們的樣式正確加載，我們可以使用JavaScript來檢查less文件是否已經加載完畢，然后再將它們應用到頁面。

要加載一個Less文件，我們首先需要使用less.js。這是一個免費的JavaScript庫，可以在我們的網站上實時編譯Less并應用它們。

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js"></script>

我們可以將這些代碼添加到頁面的標簽中。這將告訴瀏覽器加載我們的Less文件，并啟用less.js來實時編譯和應用生成的CSS。

一旦我們的頁面加載完成，我們就可以執行JavaScript代碼來檢查less文件是否已經加載完畢。以下是一個簡單的例子：

window.onload = function() {
var lessStylesheet = document.querySelector('link[rel="stylesheet/less"]');
lessStylesheet.onload = function() {
// less文件已經加載完畢
less.refresh();
});
};

在這段代碼中，我們在文檔加載完成時找到我們的Less文件。然后，我們將在Less文件加載完成時執行一個回調。在回調中，我們使用less.js的refresh方法來編譯和應用Less生成的CSS。

在刷新過程中，less.js將查找所有被加載的less文件并重新編譯它們。然后它會將生成的CSS應用于頁面，并刪除任何舊的CSS規則。

總的來說，使用Less編寫樣式并將它們實時應用于頁面是一個優秀的實踐。通過使用less.js，我們可以確保我們的樣式被正確加載和應用，同時還有最小的延遲。