Предзагрузчик изображений JQuery (как я могу быстрее загрузить load.gif)

Question

Я пытаюсь получить предварительный загрузчик изображений JQuery, чтобы начать «загружать» и области предварительной загрузки изображений, чтобы сразу начать работу на странице (если это даже правильный термин), и я экспериментировал с размещением javascript и другими вещами, но он всегда загружается слишком поздно для моих вкусов.

Вот URL

http://eleven23.net/beta/work/web/lounge22-preload.php

Есть несколько переменных Im экспериментируя с, чтобы получить его, чтобы загрузить быстрее

Какой я должен использовать?

$ (окно) .bind ("нагрузка", функция() {

• или -

$ (документ) .ready (функция() {

Также Ive разместил встроенный javascript прямо перед </body>, надеясь, что также ускорит время начала jquery.

Любые предложения?

Answer 1

$ (document) .ready() срабатывает, когда DOM загружен и готов к работе. Добавление загрузочного изображения здесь, предварительная загрузка большого изображения и последующее удаление загружаемого изображения снова не будут работать так, как вы этого хотите.

Вам необходимо добавить загрузочное изображение к вашей разметке (так что оно сразу разворачивается), затем предварительно загрузить большое изображение и при загрузке скрыть/удалить загружаемое изображение.

Существует хороший учебник по предварительной загрузке изображений с использованием простого плагина here.

Answer 2

Я использовал старый элемент изображения для кэширования изображений. Когда они загружаются, я знаю, что они находятся в кеше браузера. Если я хочу убедиться, что они рядом, я держу их в массиве, который не может выйти из сферы действия.

var images = []; 

// Preload a list of images with an optional callback as a final parameter. 
function preload() { 
    if (arguments.length == 0) return; 
    var waiting = arguments.length - 1, 
     count = 0, 
     callback = arguments[ arguments.length - 1 ]; 
    if (typeof callback == "string") { 
     callback = function() { }; 
     waiting++; 
    } 
    function loaded() { 
     if (++count == waiting) callback(); 
    } 
    for (var i = 0 ; i < waiting ; i++) { 
     var image = new Image(); 
     image.onload = loaded; 
     image.src = arguments[ i ]; 
    } 
} 

preload("people.gif", "images/star.jpg", "/site/images/panorama.jpg", function() { 
    doSomethingWithImages(); 
}); 

Мне было бы интересно узнать о каких-либо серьезных недостатках в использовании элемента изображения.

Я не могу найти оригинальную документацию для изображения на MDC, но здесь приведена современная документация по использованию объекта Image.

https://developer.mozilla.org/en/Canvas_tutorial/Using_images

Но объект еще до Canvas и HTML 5. Это идет обратный путь.

https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html

Answer 3

Эй, вы можете проверить большое JQuery Preloader, что я написал с полными обратных вызовов, автоматическое чтение изображений для предварительной загрузки, и много ослабления в анимации. Посмотрите здесь: jQuery Preloader