Как написать предварительный загрузчик Javascript?

Я не говорю о том, как предварительно загружать изображения с помощью Javascript, я больше думаю о загрузчике Flash, который отображает какую-то обратную связь во время загрузки SWF.

Рассматриваемый сайт интенсивно использует Javascript и требует много больших изображений при загрузке страницы, поэтому я хочу скрыть сайт за экраном загрузки, пока все исходные изображения не будут загружены.


person Matthew Scharley    schedule 04.05.2011    source источник
comment
Вы должны написать предварительный загрузчик Flash в (сюрприз!) Flash :)   -  person David Titarenco    schedule 04.05.2011
comment
@ Дэвид Очевидно. Но я не ищу загрузчик Flash, я пытаюсь написать его на JS для веб-сайта без Flash.   -  person Matthew Scharley    schedule 04.05.2011
comment
Ах, я понял. Я был сбит с толку. Прости.   -  person David Titarenco    schedule 04.05.2011
comment
Вы используете jQuery? Если вы это сделаете, мой плагин waitForImages сделает это.   -  person alex    schedule 04.05.2011
comment
@alex: Мы делаем, и похоже, что он определенно может делать то, что нам нужно, так что отличная работа! Однако один вопрос: обрабатывает ли это фоновые изображения CSS и тому подобное, или только теги <img>?   -  person Matthew Scharley    schedule 04.05.2011
comment
@Matthew Я добавил это как ответ :) На данный момент он поддерживает только элементы img, хотя сегодня вечером я могу сделать background-image (если у меня будет время) :)   -  person alex    schedule 04.05.2011
comment
@alex: Я тоже рад внести свой вклад в этот патч, если хотите, я просмотрел код, и он не очень сложный.   -  person Matthew Scharley    schedule 04.05.2011
comment
@Matthew Конечно, если хотите :) Не стесняйтесь связаться со мной, чтобы обсудить что-либо.   -  person alex    schedule 04.05.2011
comment
@alex Пройдет неделя или две, пока я доберусь до этого, сейчас я провожу упреждающее исследование.   -  person Matthew Scharley    schedule 04.05.2011
comment
@Matthew Я опубликую здесь продолжение, если доберусь до новой функции (или я вижу, что вы сейчас тоже следите за проектом, ура).   -  person alex    schedule 04.05.2011
comment
@Matthew Я только что выложил свою новую версию, которая поддерживает ссылки на изображения в CSS. Дайте мне знать, что вы думаете :)   -  person alex    schedule 05.05.2011


Ответы (2)


Я написал плагин jQuery под названием waitForImages, который позволяет это сделать.

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

$('body').waitForImages(
function() {
   // Called when all images have loaded.
},
function(loaded, total, success) {
   // Called once each individual image has loaded.
   // `loaded` is the number of images loaded so far.
   // `total` is the total number of images to load.
   // `success` is `true` if the image loaded and `false` if the image failed to load.
   // `this` points to the native DOM `img` element.
},
// Set the third argument to `true` if you'd like the plugin to look in the CSS
// for references to images.
true
);

jsFiddle.

person alex    schedule 04.05.2011

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

Осторожно, уродливый код, как я написал это, когда начинал. Также это, вероятно, не совсем то, что вы ищете, хотя есть хорошие комментарии. Просто измените его и сделайте универсальной функцией. На основе jQuery для галереи javascript:

this.preload = function(){
    /*
     * Preloads all the image to a hidden div so the animation won't glitch.
     */
    if (document.getElementById("preload")){                // Checks for existance.
        var preload = document.getElementById("preload");   // Gets the preload div if it exists.
    } else {
        var preload = document.createElement("preload");    // Creates the preload div if it doesn't exist.
        $(preload).attr("id", "preload");
    }
    for (var i=0; i<this.aNodes.length; i++){               // Get all the image links
        var img = document.createElement("img");            // Loads all the image in a hidden div.
        $(img).attr("src", this.aNodes[i].href);
        preload.appendChild(img);
    }
}
person Pwnna    schedule 04.05.2011
comment
Как вы узнаете, когда он завершил загрузку? Я не слишком много исследовал это, но я не знал, что вы можете зацепиться за это. - person Matthew Scharley; 04.05.2011
comment
Я не уверен, но, возможно, для вышеперечисленного вы можете добавить что-то в img.onload, где он уведомит где-нибудь, что изображение x было загружено. Как только все желаемые изображения загружены, вы можете подать сигнал готовности. - person Pwnna; 04.05.2011