JQuery Image Preloader (как мне сделать, чтобы loading.gif появлялся быстрее) - PullRequest
Новая
       13

JQuery Image Preloader (как мне сделать, чтобы loading.gif появлялся быстрее)

0 голосов
/ 22 июля 2009

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

Вот URL

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

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

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

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

  • или -

$ (документ) .ready (function () {

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

Есть предложения?

Ответы [ 3 ]

2 голосов
/ 22 июля 2009

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

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();
});

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

Я не могу найти оригинальную документацию для Image в 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

0 голосов
/ 17 августа 2010

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

0 голосов
/ 22 июля 2009

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

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

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

...