Pregunta

En la aplicación de fácil deslizante 1.7 con jQuery en una página de la mía, me parece que cuando se muestra la página carga por primera vez, las dos imágenes en la pantalla deslizante ul y luego las cargas deslizantes correctamente y sólo la primera diapositiva.

¿Cuál es la mejor manera de corregir esto para que el deslizador div no se muestra hasta que el script se ha cargado correctamente? Estoy usando este código para ejecutarlo:

$(document).ready(function(){   
    $("#slider").easySlider({
        auto: true,
        continuous: true,
        pause: 10000
    });
});
¿Fue útil?

Solución

Sólo puede ocultar el contenido a través de CSS, así:

#slider { display: none; }

A continuación, mostrar que al cargar la página, así:

$(document).ready(function(){
  $("#slider").show().easySlider({ auto: true, continuous: true, pause: 10000 });
});

Para estar seguro que me gustaría añadir un bloque a la página para que los usuarios no-JS, podría ser una hoja de estilos en el interior si usted tiene una gran cantidad de estos, de lo contrario sólo una etiqueta de estilo:

<noscript><style type="text/css">#slider { display: block; }</style></noscript>

Otros consejos

He añadido el código de abajo a mi css para ocultar las imágenes de ser apilados.

/*Added to hide stacking of images on IE 7/8*/
#slider{
  height:227px;
  overflow:hidden;
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top