jquery .load() and image show

Question

i uploaded my first webpage http://www.gerenpro.net/ (in case it does no work http://www.gerenproca.com domain name is supose to change soon). i'm having trouble with .load() and loading images:

<div id=tab31>
    <div class=centro >
        <div align="justify" class=izq> 
            <ul id=menuobra>
                <li class="menuobrali"onclick="ajaxObra('imgobra1')">Complejo Criogénico Antonio Jose de Sucre</li>
                <li class="menuobrali"onclick="ajaxObra('imgobra2')">Construcción de la planta de concentración de mineral de hierro</li>
                <li class="menuobrali"onclick="ajaxObra('imgobra3')">Construcción fundación de turbo generador planta termoeléctrica subestación termobarranca</li>
                <li class="menuobrali"onclick="ajaxObra('imgobra4')">METOR - Proyecto de expansión de metanol</li>
                <li class="menuobrali"onclick="ajaxObra('imgobra5')">Obras civiles de la planta de PROPPANTS</li>
                <li class="menuobrali"onclick="ajaxObra('imgobra7')">Excavación, carga, acarreo y disposición de materia prima no conforme(operación minera)</li>
                <li class="menuobrali"onclick="ajaxObra('imgobra8')">Excavación para los fosos norte-sur UNEFA y túnel de interconexión</li>
                <li class="menuobrali"onclick="ajaxObra('imgobra9')">Desarrollo e integración de la Av. Lecuna y proyecto de ingeniería de detalle y construcción del sector teatros</li>
                <li class="menuobrali"onclick="ajaxObra('imgobra10')">Movimiento de tierra, construcción de vialidad y desarrollo del urbanismo insdustrial de la Siderúrgica Nacional</li>
            </ul>
        </div>
        <div class=der>
            <div id=fotoobra > </div>
        </div>
    </div>
</div>

So, in that segment, I have some onclick events, they call this

function ajaxObra(id) {
    ci=0;i=1;
    $("#fotoobra").empty().html('<img src="img/bar.gif" />');
    $("#fotoobra").load("galeria.html#"+id,function({$("#fotoobrali").css({opacity:0}).removeClass('show');
    $("#fotoobra li:first-child").addClass('show').css({opacity: 1}).css({display:""});
    clearInterval(timerGaleriaObra);
    timerGaleriaObra = setInterval('animarGaleriaObra()',3000)});
}

function animarGaleriaObra(){
    i=ci+1;
    if(i>5) { i=1 }
    $('ul.slideobra li:nth-child('+i+')').addClass('show').css({opacity:1}).css({display:""});
    $('ul.slideobra li:nth-child('+ci+')').hide().css({opacity:0}).removeClass('show');
    ci=i;
}

So basically it's start a cicle for showing images. but it's not working as i thought it would, if a click just one element, isn't supose to call a .load() to only the id i'm passing?. when i click one, it calls all the .html, not only the element id im passing in load function. so when a click the others li, the elements are already loaded, as the load call triggers just with one li clicked

Another thing I noticed it's that the images start showing before fully loaded. how could i validate the images to fully load, and then show, using my good .load() function?

UPDATE: how i know the other content of the external .html is already loaded before i make the call?.. because when triggering the events that are supose to start loading the other images (onclick event on the "li") the images are already full loaded.. they all load with just one onclick triggered

Answer 1

I'd guess your first issue is that you're loading the url as "galeria.html#"+id which will be a standard request and get the full page back (assuming it's one page that's a catalog of images). You're most likely looking for the specialized signature of load() which uses the parameter format of "url #fragment" (notice the space), so probably want: "galeria.html #"+id.

As far as validating the images, you can hook into the load events from the individual elements and do whatever kind of delayed display/validation you want there.