Как загрузить контент страницы после того, как head.js закончит загрузку скриптов

Question

В настоящее время я использую head.js, чтобы отложить загрузку файлов js для моего сайта. Я использую colorbox в моем проекте. Проблема в том, что иногда colorbox загружается не полностью (он открывает colorbox на новой странице, а не в диалоге), но когда я делаю несколько обновлений, он, наконец, загружается.

Я предполагаю, что это может быть связано с тем, что содержимое страницы, предназначенное для открытия диалогового окна colorbox, загружается даже до того, как js-файлы colorbox полностью загружаются head.js. Это действительная причина?

Я бы хотел, чтобы colorbox отображался правильно каждый раз без необходимости обновления.

Как сохранить код страницы colorbox для выполнения только после того, как head.js завершит загрузку всех зависимых файлов?

Благодарю. Nikk

Answer 1

Поместите свой HTML-код colorbox в div.

<div id="colorBoxDiv" style="display:none;">
</div>

В последней строке head.js добавьте этот код:

$("#colorBoxDiv").html($("#colorBoxDiv").html()).show();

Answer 2

У head.js было много разных вариантов, как это сделать. Вы можете запустить функцию обратного вызова, когда необходимые файлы загружены, или использовать test функция API-вызов. Например:

// queue scripts and fire a callback when loading is finished
head.load("file1.js", "file2.js", function() {
    // do something
 });

// same as above, but pass files in as an Array
head.load(["file1.js", "file2.js"], function() {
    // do something
});

// you can also give scripts a name (label)
head.load({ label1: "file1.js" }, { label2: "file2.js" }, function() {
    // do something
});

// same as above, but pass files in as an Array
head.load([{ label1: "file1.js" }, { label2: "file2.js" }], function() {
    // do something
});                   

// Labels are usually used in conjuntion with: head.ready()
head.ready("label1", function() {
    // do something
});

 // Actually if no label is supplied, internally the filename is used for the label
 head.ready("file1.js", function() {
    // do something
});

Больше в документации