Массовое событие onLoad останавливает анимацию GIF - PullRequest
Новая
       16

Массовое событие onLoad останавливает анимацию GIF

0 голосов
/ 06 декабря 2011

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

Что у нас есть

  1. # кнопка отправки
  2. приonClick to #submit, мы выбираем данные getJSON
  3. json - это URL изображений (может быть 1-1000 ++ URL)
  4. для .each src мы проверяем onLoad

  5. и если он загружен, мы добавляем html к div # out 

    <img id="load" src="load.gif" />
<input id="submit" type="submit" value="submit" />
<div id="out"></div>

<script type="text/javascript">

$('#submit').click(function()
{
    $.getJSON('/data.json', function(data) {

        $.each(data, function(idx, img_src) {

            $('<img src="'+img_src+'">').load(function() {
                $('#out').append('<img id="id'+idx+'" src="'+img_src+'">');
            });     

        });

    });

});

В моем примере я не показываю и не скрываю load.gif,Сейчас nvm показывает главную проблему - анимация зависает при работе скрипта.

Протестировано на jQuery 1.7.1 + Chrome 17 (мое приложение специально для этого браузера)

1 Ответ

1 голос
/ 06 декабря 2011

Если вы хотите дать браузеру несколько циклов для выполнения других задач во время загрузки миллиарда изображений, вы можете выполнить небольшую работу над серией вызовов setTimeout(), чтобы позволить некоторым другим вещам происходить между вашими кусками работы. как это: 

$('#submit').click(function() {
    $.getJSON('/data.json', function(data) {
        var i = 0;
        var out$ = $('#out'); 
        function appendNextImage() {
            // assumes data is an array of image URLs
            $('<img id="id'+i+'" src="'+data[i]+'">').load(function() {
                out$.append(this);
            });
            i++;
            if (i < data.length) {
                setTimeout(appendNextImage, 1);
            }
        }
        appendNextImage();
    });
});

Я также изменил создание вашего изображения, поэтому вы добавляете уже созданный объект DOM вместо создания второго дублирующего объекта DOM и помещаете объект $('#out') jQuery в замыкание, чтобы он не создавался заново каждый раз.

Поскольку я не могу использовать jQuery .each() в этой структуре кодирования, мне пришлось вручную перебирать ваши данные. Я предположил, что это массив URL.

...