0

最初の Web ページhttp://www.gerenpro.net/をアップロードしました (うまくいかない場合に備えて、http://www.gerenproca.comドメイン名は間もなく変更される予定です)。.load() と画像の読み込みに問題があります:

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

そのセグメントには、いくつかの onclick イベントがあり、これを呼び出します。

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

基本的には、画像を表示するための cicle を開始します。しかし、それは私が思ったように機能していません.1つの要素だけをクリックすると、私が渡しているIDだけに.load()を呼び出すことは想定されていませんか?. 1つをクリックすると、load関数で渡される要素IDだけでなく、すべての.htmlが呼び出されます。そのため、他のliをクリックすると、要素はすでにロードされています.1つのliをクリックするだけでload呼び出しがトリガーされるためです

私が気付いたもう 1 つのことは、画像が完全に読み込まれる前に表示され始めることです。良い .load() 関数を使用して、画像が完全にロードされてから表示されることを検証するにはどうすればよいですか?

更新:呼び出しを行う前に、外部の.htmlの他のコンテンツが既に読み込まれていることをどのように知ることができますか?..他の画像の読み込みを開始すると想定されるイベント(「li」のonclickイベント)をトリガーすると、画像すでに完全にロードされています..それらはすべて、onclickが1回トリガーされるだけでロードされます

4

1 に答える 1

0

あなたの最初の問題は"galeria.html#"+id、標準のリクエストである URL を読み込んで、ページ全体を取得していることだと思います (画像のカタログである 1 つのページであると仮定します)。load()「url #fragment」(スペースに注意してください) のパラメーター形式を使用する特殊な署名を探している可能性が最も高いため、おそらく次のようにします"galeria.html #"+id。

画像の検証に関しては、個々の要素からの読み込みイベントにフックして、そこで必要な遅延表示/検証を行うことができます。

于 2012-09-26T15:48:02.043 に答える