jquery .load() 및 이미지 표시

Question

내 첫 번째 웹 페이지 http://www.gerenpro.net/을 업로드했습니다. 작동하지 않는 경우를 대비하여 http://www.gerenproca.com 도메인 이름은 곧 변경 될 수 있습니다. 가에 대한 cicle 시작이다

<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> 

그래서, 그 세그먼트에서, 나는 그들이 그래서 기본적으로이

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; 
} 

전화, 일부 온 클릭 이벤트가 : 내가 .load() 및로드 이미지에 문제가있어 이미지를 보여주는. 하지만 그것은 단지 하나의 요소를 클릭하면 suload를 호출하는 것이 아니라는 생각으로 작동하지 않습니다. 하나를 클릭하면로드 함수에서 전달되는 요소 ID뿐만 아니라 모든 .html이 호출됩니다. 로드 버튼을 클릭하면 다른 요소를 클릭하면 요소가 이미로드됩니다.

또 다른 사실은 이미지가 완전히로드되기 전에 표시된다는 것입니다. 어떻게 좋은, .load() 함수를 사용하여 이미지를 완전히로드하고 표시하는지 확인할 수 있습니까?

업데이트 : 외부 .html의 다른 내용이 내가로드되기 전에 이미로드되어 있는지 어떻게 알 수 있습니까? 왜냐하면 다른 이미지 (onclick 이벤트)를로드하기 시작하는 이벤트를 트리거 할 때 "li") 이미지는 이미 전체로드되어 있습니다 .. 그들은 하나의 onclick 트리거와 함께 모두로드됩니다.

Answer 1

나는 이것이 당신이 원하는 것이라고 생각합니다. 나는 this SO answer을 기반으로 이것을 사용했고 그것은 훌륭하게 작동했습니다!

Answer 2

첫 번째 문제는 표준 요청이 될 "galeria.html#"+id이라는 URL을로드하고 전체 페이지를 다시 가져 오는 것입니다 (이미지 카탈로그 인 한 페이지라고 가정). "url #fragment"(공백을주의하십시오)의 매개 변수 형식을 사용하는 load()의 특수 서명을 찾고있을 가능성이 큽니다. 따라서 아마도 : "galeria.html #"+id을 원할 것입니다.

이미지의 유효성을 검사 할 때까지 개별 요소의로드 이벤트에 연결하고 거기에서 원하는 지연된 표시/유효성 검사를 수행 할 수 있습니다.