Загрузчик для скриптов и изображений

Question

У меня тяжелая HTML-страница с несколькими мегабайтами изображений и скриптов. Я хотел бы показать загрузчик, используя JavaScript, как Flash - с индикатором прогресса и процентами.

Есть ли какая-либо библиотека с входными данными: массив URL-адресов (js-скрипты и изображения), которые делают обратный вызов, когда что-то загружается. Я знаю размеры ресурсов, поэтому смогу делать прогрессбар.

Было бы лучше, если библиотека загрузчика очень легкая или использует jQuery. Также, если он может загружать CSS, это здорово (я использую LESS, но должен быть таким же).

Answer 1

jQuery помогает:

• локальные скрипты (url.substr(0, 7) != 'http://'): $.get(url, function(data){eval(data); callback(url)}
• удаленные скрипты: $.getScript(url, function(){callback(url)})
• изображений: var el = new Image(); el.onload = function(){callback(url)}; el.src = url;

И у меня есть массив с URL-адресами и размерами, поэтому я знаю, сколько уже было загружено и общий размер.

Answer 2

Я не знаю ни одного стандартного плагина, который бы достиг того, что вы ищете. Однако вы должны быть в состоянии написать свой собственный с помощью .load () и .progressbar () .

Общая идея заключается в том, чтобы показать вам загрузку gfx по умолчанию со всем остальным скрытым. Когда все загрузится, покажите свой основной интерфейс.

$(document).ready(function(){
    $(window).load(function() {
        $("#loading").hide();
        $("#mainUI").show();
    });
});

Ключ здесь - $ (window) .load ().