Contenido de slider = 0px ?????

[bNd170]

Me estoy volviendo loco intentando fixear este problema y no se donde puede estar el fallo.

Tengo un slider casero:

Código HTML:

<section class="slider ignora-bordes">
        <ul id="slider">
            <li class="ignora-bordes"><a href="/"><span>Texto del slider</span><img src="images/slider.jpg" alt="Slider"></a></li>
        </ul>
    </section>
 

Y aqui su css:

Código CSS:

section.slider ul#slider {
    list-style: none;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    border-bottom: 5px solid #000;
    font-size: 0;
}
section.slider ul#slider > li {
    position:relative;
    display:inline-block;
}
section.slider ul#slider > li > a {
        display: inline-block;
}
section.slider ul#slider > li > a > span {
    position: absolute;
    color: #fff;
    font-size: 36px;
    text-shadow: 0 0 34px #000;
    font-weight: 900;
    display: inline-block;
}
section.slider ul#slider img {
    width: 100%;
}
 

Bien el caso es que el texto del slider lo tengo que centrar mediante Javascript, mas concretamente usando jQuery y he hecho esta funcion.

Código Javascript:

function redimensiona_texto_slider() {
        $('section.slider ul#slider > li').each(function() {
            var ancho_slider = $(this).width(),
                alto_slider = $(this).height(),
                alto_texto = $(this).find('span').height(),
                ancho_texto = $(this).find('span').width(),
                top_texto = alto_slider / 2 - alto_texto / 2,
                left_texto = ancho_slider / 2 - ancho_texto / 2;
            console.log('Slider alto = '+alto_slider+'px | Slider ancho= '+ancho_slider+'px | Span alto = '+alto_texto+'px | Span ancho= '+ancho_texto+'px');
            if(top_texto == 0)
                $(this).find('span').css({'font-size':ancho_slider/40 + 'px', 'left':left_texto+'px'});             
            else
                $(this).find('span').css({'font-size':ancho_slider/40 + 'px', 'top':top_texto+'px', 'left':left_texto+'px'});
        });
    }
    $(window).on('resize',function() {
        redimensiona_texto_slider();
    });
    redimensiona_texto_slider();
 

Y el caso es que la primera vez que llamo al console.log me devuelve esto:

Código:

Slider alto = 0px | Slider ancho= 1583px | Span alto = 44px | Span ancho= 678px

Y cuando hago el resize esto otro:

Código:

Slider alto = 570px | Slider ancho= 1583px | Span alto = 50px | Span ancho= 754px

Es como si la primera vez que ejecutase la funcion despues de haber cargado el DOM, el slider no tuviese height establecido y al resizar si.

¿Alguien sabe que puede estar pasando?


EDITO:

Bendito google, estaba ya desesperado cuando he encontrado este articulo, por si alguien ha tenido un problema similar lo comparto

http://es.softuses.com/72545

$(document).ready(); Se ejecuta cuando el DOM ha sido cargado, las imagenes no forman parte de este a la hora de cargar.

En su lugar usamos

$(window).load(); Esto ejecutará todo una vez la web haya finalizado de cargar al 100%