Fondo Crossfade Transits JavaScript y CSS -- javascript campo con html campo con css camp Relacionados El problema

Background crossfade transitions javascript and css


1
vote

problema

Español

Soy nuevo en JavaScript . Hice un código simple que en JavaScript cambiará al azar mi fondo cada 5 segundos, sin embargo, se ve horrible.
Ambos cargando la imagen y la transición es Jumpy y no se ve bien en absoluto. Cuando Google este problema todo el código se ve super complicado, no se me permite usar enlaces externos para Ayuda tampoco (es un proyecto escolar).

Lo que quiero es implementar transiciones cruzadas en mi código, y he visto a las personas que lo hacen usando CSS, pero para eso, tienes que agregar cada imagen y Blah Blah Blah, quiero que sea reutilizable, para mí Escribe una vez y luego, si agrego más fotos, no tendré que cambiar nada, espero que ustedes comprendan y espero que puedas ayudar. :)

Código:

  function random_pic() {   // image array   var images = ["url(1.jpg)", "url(2.jpg)", "url(3.jpg)", "url(4.jpg)"];    // execute code every 5 seconds   window.setInterval(function() {       // create a random number between 0 and 4       var num = Math.floor(Math.random() * 4);       // set the background to one of the images in the array       document.body.style.backgroundImage = images[num];     },     5000); }  random_pic();   
Original en ingles

I am new to javascript. I made a simple code that in javascript will randomly change my background every 5 seconds, however, it looks horrid.
Both of loading the picture and the transition is jumpy and doesn't look nice at all. When I google this problem all the code looks super complicated, I am not allowed to use external links for help either(it's a school project).

What I want is to implement crossfading transitions into my code, and I have seen people do it using CSS but for that, you have to add every single picture and blah blah blah, I want it to be reusable, for me to write it once and then if I add more pictures I won't have to change anything, hope you guys understand and hope you can help!!! :)

Code:

function random_pic() {   // image array   var images = ["url(1.jpg)", "url(2.jpg)", "url(3.jpg)", "url(4.jpg)"];    // execute code every 5 seconds   window.setInterval(function() {       // create a random number between 0 and 4       var num = Math.floor(Math.random() * 4);       // set the background to one of the images in the array       document.body.style.backgroundImage = images[num];     },     5000); }  random_pic(); 
        
   
   

Lista de respuestas

3
 
vote
vote
La mejor respuesta
 

Estoy leyendo que tiene dos problemas diferentes que está tratando de resolver. El mayor problema es el problema de cruce. El otro problema es el rendimiento y la carga de las imágenes.

Como esta es una tarea escolar, creo que no es una buena idea compartir el código exacto que hará este trabajo, pero le daré algunos punteros que puede usar para llegar al resultado deseado.

  1. Para crossfading, deberá tener 2 elementos que usen una animación de desvanecimiento (Opacidad CSS) para crear el efecto.
  2. Una vez que el elemento que se desvanece está completamente desvanecido, cambie la fuente de la imagen para una nueva y desaparecerla mientras el otro elemento se desvanece y repita el proceso.
  3. Al cambiar la fuente de la imagen cuando no está visible para el usuario, probablemente tenga una mejor apariencia y se sientan mejor porque la imagen se cargará antes de que se muestre al usuario.
  4. Para obtener a TIPTANTE, asegúrese de que las imágenes que esté utilizando son lo más pequeñas posible en el tamaño del archivo. Para referencia, trataría de mantenerlos bajo un 100kb para comenzar.
  5. También podría analizar la precarga de las imágenes, pero eso podría ser un paso demasiado lejos para una asignación escolar.

Espero que esto ayude. Buena suerte.

 

I'm reading that you have two different issues that you are trying to solve. The biggest issue is the crossfading issue. The other issue is the performance and loading of the images.

As this is a school assignment I think it's not a good idea to share the exact code that will make this work, but I'll give you some pointers that you can use to get to the desired result.

  1. For crossfading you will need to have 2 elements that use a fade animation (css opacity) to create the effect.
  2. Once the element that fades out is completely faded out, swap the source of the image for a new one and fade it back in while the other element fades out and repeat the process.
  3. By changing the source of the image when it's not visible for the user you will probably have a better look and feel because the image will be loaded before it's shown to the user.
  4. To get it performant, make sure that the images that you are using are as small as possible in file size. For reference I would try to keep them under a 100kb to start with.
  5. You could also look into preloading the images, but that might be a step too far for a school assignment.

Hope this helps. Good luck.

 
 
 
 

Relacionados problema

8  Desapareciendo bordes de células de mesa CSS en navegadores basados ​​en gecko  ( Disappearing css table cell borders in gecko based browsers ) 
Tengo una construcción de tabla HTML muy específica que parece revelar un error de gecko. Aquí hay una versión destilada del problema. Observe la siguiente ...

0  LazyWeb: necesita Javascript que elimina los elementos de LI basados ​​en la clase visitada de un elemento  ( Lazyweb need javascript that removes li elements based on visited class of a el ) 
Tengo esta página que tiene muchos datos que no necesito, ya que ya he hecho clic en él, pero se repite a menudo, así que tengo que buscar visualmente el azul...

0  Deshacerse del disco en el artículo de la lista  ( Getting rid of disc in list item ) 
Estoy desarrollando un sitio usando jquery, y jquery ui Tabs. Por alguna razón, mis pestañas (lista desordenada) están mostrando sus balas en todos los navega...

4  Cuerda continua que no se envuelve en TD  ( Continuous string not getting wrapped in td ) 
Cuando coloco una larga cadena continua en mi ancho fijo TD, no se está envuelto. La cadena aumenta el ancho de mi mesa. ¿Alguien puede ayudarme con esto? P...

0  Imagen de fondo Blurs en Firefox3  ( Background image blurs in firefox3 ) 
Cuando uso la imagen en mi página HTML usando la propiedad de fondo. Los loks están bien en IE, pero se ve borroso en Firefox. Wat podría ser la posible soluc...

5  Cómo alinear verticalmente una tabla en CSS  ( How to vertically align a table in css ) 
¿Cómo puedo alinear verticalmente una tabla en el centro de la pantalla con CSS? ...

303  ¿Por qué el ancho se colapsó en el elemento secundario del ancho porcentual en un padre absolutamente posicionado en Internet Explorer 7?  ( Why did the width collapse in the percentage width child element in an absolutel ) 
Tengo un double8 que contiene varios niños, uno de los cuales es un 99887776669 relativamente posicionado. Cuando uso un Form0 en el niño Form111111 , ...

142  ¿Cómo detectar cuál de las fuentes definidas se utilizó en una página web?  ( How to detect which one of the defined font was used in a web page ) 
Supongamos que tengo la siguiente regla de CSS en mi página: body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ¿Cómo podría detec...

1  Directrices para diseñar HTML para una fácil personalización CSS  ( Guidelines for designing html for easy css customization ) 
Estoy haciendo un proyecto SAAS, y queremos que cada cliente pueda cargar una página CSS para "su" sitio web. (Aunque en realidad, todos los sitios del client...

76  Cómo romper la palabra después de un carácter especial como guiones (-)  ( How to break word after special character like hyphens ) 
Dado un CSS relativamente simple: div { width: 150px; } <div> 12333-2333-233-23339392-332332323 </div> ¿Cómo lo hago para que la cade...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos