Блог

Главная - Вопросы по программированию - Как отобразить панель загрузки для изображений с помощью jQuery?

Как отобразить панель загрузки для изображений с помощью jQuery?

#javascript #html #css #jquery

#javascript #HTML #css #jquery

Вопрос:

У меня на странице есть изображения.

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

Как я могу это сделать?

Комментарии:

1. Будьте более конкретными. Панель загрузки для чего?

Ответ №1:

Я написал плагин jQuery для регистрации обратных вызовов для загрузки изображений.

Вы бы использовали это примерно так…

 var loading = $('<div id="loading" />').appendTo('body');

$('body').waitForImages(function() {
   loading.remove();
 }, function(loaded, all) {
   loading.html(((loaded / all) * 100)   '% loaded');
});

jsFiddle.

Комментарии:

1. @yckart load() Метод устарел. Если само событие устарело, оно должно быть удалено из W3C.

Ответ №2:

 var preload = function (images, callback) {
    var count = 0;
    for (var i = 0, len = images.length; i < len; i  ) {
        var img = new Image();
        img.src = images[i];
        img.onload = function () {
            var perc =   count * (100 / len) | 0;
            if (callback) callback.call(this, perc, perc === 100);
        };
    }
};

Использование довольно простое:

 preload(['http://lorempixel.com/800/600'], function(perc, done) {
    console.log( perc);
    if(done) console.log( 'Done!' );
    // `this` refers to each loaded image.
});