Индикатор выполнения Backbone.js при получении коллекции

Question

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

Контент, который я выбираю, в основном состоит из изображений (видео постер и т. Д.), Но я получаю только ссылку, а не строку base64 или что-то большое. То, что я хотел бы сделать, это наложить экран с индикатором выполнения при получении ссылок на изображения, визуализировать представление, чтобы все изображения были готовы, и затем наложение должно исчезнуть и показать приложение с уже загруженным свежим контентом.

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

Answer 1

Попробуйте это:

var SomeView = Backbone.View.extend({
    loadStuff: function(){
        var self = this;
        someModel.fetch({
            xhr: function() {
                var xhr = $.ajaxSettings.xhr();
                xhr.onprogress = self.handleProgress;
                return xhr;
            }
        });
    },
    handleProgress: function(evt){
        var percentComplete = 0;
        if (evt.lengthComputable) {  
            percentComplete = evt.loaded / evt.total;
        }
        //console.log(Math.round(percentComplete * 100)+"%");
    }
});

Answer 2

Вы можете использовать jQuery ajaxStart и ajaxStop, чтобы показать прогресс в начале и скрыть его в конце. Однако, если вы сделаете это таким образом, ваш индикатор будет отображаться в любое время, и на вашей странице будет сделан запрос ajax.

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

Answer 3

Вот некоторые шаги, которые могут сработать.

1. , когда начинается выборка (возможно, с использованием ajaxStart или чего-либо еще), откройте всплывающее окно.
2. , когда выборка завершится,идентифицируйте или создайте URL-адреса изображений из JSON и используйте один из нескольких предварительных загрузчиков изображений, которые имеют обратный вызов при загрузке всех изображений. Если вы хотите сделать это самостоятельно, я бы сказал, что это будет psuedocode для этого:
   1. Вставьте все ваши изображения в массив imagesurls.(это будет массив строк).
   2. Захват длины массива в переменную imagesleft.
   3. Создание функции var imageOnLoad = function () {...} для захвата этой переменной, которая
      1. уменьшаетсяimagesleft на 1
      2. Делает все, что нужно для обновления всплывающего окна
      3. , если imagesleft достигает 0, вызывает код / ​​метод, чтобы в конечном итоге поповер исчезал
   4. Для каждой из строк imagesurls[i] в массиве imagesurls
      1. создайте новый объект Image.var img = new Image();
      2. img.onload = imageOnLoad;
      3. img.src = imagesurls[i];

Конечно, я игнорирую ошибки(Изображения имеют свойство onerror, которое можно назначить аналогичным образом, и исходный ajax может потерпеть неудачу).но я думаю, что суть решения есть.Единственное, что меня интересует, это то, нужно ли вам на самом деле сохранять ссылку на каждый из объектов изображений при их создании.Это может быть хорошей идеей, по крайней мере, пока вы не закончите с полным набором изображений.В противном случае мне пришлось бы беспокоиться о том, чтобы сборка мусора как-то мешала реализации, но, возможно, я просто параноик.

Answer 4

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

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

Answer 5

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

Answer 6

Когда вы вызываете fetch, поднимите полосу загрузки.

Затем передайте функцию как options.success методу fetch ( docs ), который выводит его на экран.

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

Мы используем это для одного из наших представлений и просто выполняем его, используя options.success метод