Блог

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

предварительная загрузка изображений перед визуализацией javascript

#javascript

#javascript

Вопрос:

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

 var myPhotos = {
    _counter: 0,
    images: [],
    init: function() {
        ServerCall1(0, 'xml', 'rssphotos.php', function(xml) {
            imageObj = new Image();
            $(xml).find('item').each(function() {
                var desc = $(this).find('description').text();
                var resp = getImgArray(desc);

                myPhotos.images[myPhotos._counter] = resp[0];
                myPhotos._counter  ;

            });

            //start preloading
            for (i = 0; i < myPhotos._counter; i  ) {
                imageObj.src = myPhotos.images[i];
            }

            ////PUT THE HEADER HOME PAGE
            topHeader.putData(topHeader.photoData());
        });
    }

};

После выполнения этой функции я выполняю цикл myPhotos.images , чтобы получить их мгновенно, но рендеринг одного за другим происходит очень медленно.

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

1. Вы очень быстро просматриваете все изображения, не дожидаясь загрузки каждого из них перед повторным использованием объекта image. Это не сработает.

Ответ №1:

Возможно, это

 var myPhotos = {
    _counter: 0,
    images: [],
    init: function() {
        ServerCall1(0, 'xml', 'rssphotos.php', function(xml) {
            $(xml).find('item').each(function() {
                var desc = $(this).find('description').text();
                var resp = getImgArray(desc);

                myPhotos.images[myPhotos._counter] = resp[0];
                myPhotos._counter  ;

            });

            //start preloading
            for (i = 0; i < myPhotos._counter; i  ) {
                this.images[i]= new Image(); this.images[i].src = myPhotos.images[i];
            }

            ////PUT THE HEADER HOME PAGE
            topHeader.putData(topHeader.photoData());
        });
    }

};

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

1. спасибо, но теперь я не могу получить к нему доступ внутри основной функции jquery и других плагинов $ (function() { alert(myPhotos.images[4].src);/// весь массив изображений не определен });

2. Да, он доступен везде внутри объекта myPhotos и других глобальных функций, но поскольку он не определен внутри функций jquery, я тестирую его снова.

3. что я думаю $(function() { celebPhotos.init(); оповещение (celebPhotos. _counter); }); функция инициализации определена выше, но для ее выполнения требуется больше времени (асинхронно), и выполняется оповещение, возвращающее счетчик 0

4. Это правда… Это сложно протестировать, кроме как на вашем сервере

5. Спасибо, сэр, каждый раз, когда я использую myPhotos.images [index].src, он отправляет запрос на получение изображения, можете ли вы сказать мне, почему? потому что, как только я создал объект изображения, почему он отправляет запрос на сервер, чтобы получить его и получить неизмененный 304 в ответ, и тратить время на отображение изображения. Могу ли я остановить это??