Блог

Главная - Вопросы по программированию - При загрузке Gif с последующим зацикливанием Gif

При загрузке Gif с последующим зацикливанием Gif

#javascript #html #css #wordpress

#javascript #HTML #css #wordpress

Вопрос:

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

Ниже приведены две анимированные иконки, которые я создал. Их классы различают, какой из них загружается, а какой зацикливается.

 .on-load-gif, .looping-gif{
        max-width: 335px;
        position: absolute;
        top: 0;
        left: 0;
        }
    
    
    
.on-load-gif{
    opacity: 1;
   animation: fadeInAnimation ease 3s 
    animation-iteration-count: 1; 
    animation-fill-mode: forwards;
    animation-duration: 2s;
} 
  
@keyframes fadeInAnimation { 
    0% { 
        opacity: 1; 
    } 
    100% { 
        opacity: 0; 
     } 
}  
 <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Animation Loop</title>
</head>

<body>
    <img src="https://rossettibev.wpengine.com/wp-content/uploads/2020/08/R-Animation-for-Rossetti-on-load.gif" class="on-load-gif"alt="" />
    
    <img src="https://rossettibev.wpengine.com/wp-content/uploads/2020/08/r-animation.gif" class="looping-gif" alt="" />
</body>
</html>

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

1. итак, на странице появляется первый GIF, затем, как только страница будет полностью загружена, скройте этот GIF, а затем отобразите другой gif (r-animation.gif )? Чего еще мы ждем на странице, кроме того, что в вопросе? Я предполагаю, что использование javascript применимо?

2. @jmp Ну, при загрузке GIF не отображается достаточно долго, чтобы анимация на нем воспроизводилась. Даже если я установлю длительность первого gif на 50 секунд, он, похоже, не останется на странице, а сразу исчезнет.