Анимированные SVG не ожидают загрузки страницы

Мой сайт содержит довольно много объявлений, и для их загрузки требуется некоторое время. Это не проблема точно, но я заметил, что любые анимации SVG будут рисовать первый кадр мгновенно, но анимация приходит только после завершения загрузки на странице. В анимации SVG обычно указывается значок spinner/load. Есть ли способ начать анимацию SVG мгновенно? Или, если я преобразую его в чистый CSS, он мгновенно закроется?

Это мой svg-код загрузчика: http://jsfiddle.net/5zq5j4d9/

<div class="loading-icon-outer">
    <div class="loading-icon">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" style="enable-background:new 0 0 50 50;" xml:space="preserve">
            <rect x="0" y="8" width="4" height="4" fill="#333" opacity="0.2">
                <animate attributeName="opacity" attributeType="XML" values="0.2; 1; 0.2" begin="0s" dur="0.6s" repeatCount="indefinite" />
                <animate attributeName="height" attributeType="XML" values="4; 20; 4" begin="0s" dur="0.6s" repeatCount="indefinite" />
                <animate attributeName="y" attributeType="XML" values="8; 0; 8" begin="0s" dur="0.6s" repeatCount="indefinite" />
            </rect>
            <rect x="8" y="8" width="4" height="4" fill="#333"  opacity="0.2">
                <animate attributeName="opacity" attributeType="XML" values="0.2; 1; 0.2" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
                <animate attributeName="height" attributeType="XML" values="4; 20; 4" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
                <animate attributeName="y" attributeType="XML" values="8; 0; 8" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
            </rect>
            <rect x="16" y="8" width="4" height="4" fill="#333"  opacity="0.2">
                <animate attributeName="opacity" attributeType="XML" values="0.2; 1; 0.2" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
                <animate attributeName="height" attributeType="XML" values="4; 20; 4" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
                <animate attributeName="y" attributeType="XML" values="8; 0; 8" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
            </rect>
        </svg>
    </div>
</div>

Ответ 1

Извините за поздний ответ. В конечном итоге я перевел его в LESS и LESShat, и это мгновенно загрузится.

http://jsfiddle.net/z84yd0to/2/

Я не могу использовать LESS в jsfiddle, поэтому мне пришлось использовать вывод css, но код LESS/LESShat, который я использовал, был следующим:

.loading-icon {
    width: 20px;
    height: 20px;

    .rect {
        background-color: black;
        height: 100%;
        width: 4px;
        float:left;
        .animation(loading-rect 0.60s infinite ease-in-out);

        & ~ .rect {
            margin-left:4px;
        }
    }

    .rect1 { .animation-delay(-0.30s); }

    .rect2 { .animation-delay(-0.20s); }

    .rect3 { .animation-delay(-0.10s); }
}


.keyframes(~'loading-rect, 0%, 100% { transform: scaleY(0.2); opacity: 0.2; } 50% { transform: scaleY(1.0); opacity: 1; }');

Ответ 2

Чтобы начать анимацию как можно раньше (до запуска загрузки), спецификация SVG2 добавила атрибут timelineBegin. Это также было частью SVG Tiny 1.2.

Поддержка браузера для timelineBegin все еще отсутствует.

Возможные альтернативы включают использование анимации css, веб-анимации (созданные script, см. скрипку) или анимацию svg с помощью script. Из них, к сожалению, скорее всего, только последний будет работать во всех браузерах.