Предварительная загрузка изображений с очередями? - PullRequest
3 голосов
/ 15 июля 2011

То, что я ищу, - это способ предварительной загрузки и увеличения определенного изображения в очереди.

Вот где я сейчас нахожусь: http://shivimpanim.org/testsite/imageloader.html

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

Другими словами, вполне может быть, что image10 естественно находится в конце очереди предварительной загрузки ... но это может быть то, где пользователь наводит курсор в самом начале. Таким образом, image10 должен быть помещен в верхнюю часть очереди и немедленно загружен. По окончании очередь должна продолжить загрузку с того места, где она остановилась.

Спасибо!

РЕДАКТИРОВАТЬ: Я теперь обновил код, чтобы предварительная загрузка работала ... основные "ошибки" заключались в том, что изображение должно быть добавлено в DOM, чтобы onLoad запускался в Firefox на Mac, и Моя конкретная необходимость отслеживать исходный указатель вдоль маршрута (для соответствия заголовку и т. д.)

Кажется, работает ... но странно, порядок второго элемента странный (он загружает элемент № 3 перед элементом № 2 в автоматическом режиме).

Но в целом - он автоматически загружается в основном в правильном порядке по 2 элемента за раз, и когда пользователь наводит указатель мыши на ссылку, он помещает этот элемент в очередь и затем показывает его при загрузке:)

Я не тестировал подробно, но в Firebug все выглядит несколько нормально:)

1 Ответ

4 голосов
/ 15 июля 2011

Примерно так (не проверено):

function loader( images, n_parallel ){
    this.queue   = images.slice( 0 );
    this.loading = [];

    for( var i=0; i<n_parallel; i++ ) this.dequeue();
}

loader.prototype.dequeue = function(){
    if( !this.loading.length ){ return; }

    var img = new Image(),
       self = this;
    img.src = this.queue.unshift();

    if(img.width){
        self.dequeue();
    }else{
        img.onload = function(){
            self.dequeue();
        }
    }
}

loader.prototype.promote = function( src ){
    for(var i=0, l=this.queue.length; i<l; i++){
        if(this.queue[i] == src){
            this.queue.unshift( this.queue.splice(i, 1)[0] );
            break;
        }
    }
}


var imgs = new loader( ['foo.jpg', 'bar.jpg', 'foobar.jpg', ...], 2 );
...
imgs.promote( 'some_img.jpg' );

Чтобы это работало, вы также не можете добавить все изображения в dom при загрузке страницы. Вы должны добавить их по требованию.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...