Galería nivo-slider con problemas de carga

[ceaped]

Buenos días
Utilizo la galería "nivo-slider" y me funciona bien pero tiene un detalle y es

que cuando uno entra a la página se carga todas las imágenes encima del

contenido.

Las imágenes no son pesadas pesan en promedio 100 K.
Cargo 4 imagenes en el banner.
La página no tiene elementos pesados, es sólo el banner y texto.
Utilizo 2 formas de cargarlas.

1.

Código Javascript:

$(window).load(function() {
$('#slider').nivoSlider();
 });
 

2.

Código Javascript:

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: true, // Only show on hover
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>
 

Pero en ambas se me cargan al entrar a la página las cuatro imágenes

verticalmente

¿Cómo puedo hacer que no se carguen así las imágenes?

Gracias por su ayuda

[ceaped]

Hola alguien que sepa porque cuando entro a la página se me ven todas las imagenes del banner en vez de mostrar la pregarga?

[quike88]

Hola,

Utilicé nivo-slider en varios proyectos y no recuerdo haber tenido ningún problema. Prueba cambiando a esto:

Código Javascript:

$(document).ready(function(){
     $('#slider').nivoSlider();
});
 

Un saludo.

[ceaped]

Hola quike88
Nada no me funcionó.
Que será pues como digo el si me funciona pero cuando carga me muestra todas las imágenes unos 5 segundos y luego trabaja normal.

[ceaped]

Hola quike88
Ya identifiqué porque se cargaban todas las imagenes al abrir la página y era porque me faltaba ponerle class="nivoSlider" así:

Código HTML:

<div id="slider" class="nivoSlider">
 

este es el estilo que debería mostrar la precarga:

Código CSS:

.theme-default .nivoSlider {
    position:relative;
    margin-bottom:50px;
 
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
    background-color: #fff;
    background-image: url(../../images/nivo_slider/loading.gif);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
 

Pero sucede que no se me ve la precarga.
No es la ruta del estilo "loading.gif"
Como hago para que se visualice la precarga?

Gracias por tu ayuda

[quike88]

Hola,

Que bueno que solucionaste el problema.

Con respecto a la precarga, no veo ningún problema en el estilo. revisa que la ruta sea correcta, coloca la ruta de la imagen dentro de url() entre comillas y... verifica que el gif no sea del color de fondo

¿Tienes el sitio publicado para que lo podamos ver?


Un saludo!