0

我上传了我的第一个网页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;
}

所以基本上它是一个用于显示图像的循环。但它并没有像我想象的那样工作，如果单击一个元素，不应该只调用 .load() 到我传递的 id 吗？当我单击一个时，它会调用所有的 .html，而不仅仅是传入加载函数的元素 id。因此，当单击其他 li 时，元素已经加载，因为加载调用仅在单击一个 li 时触发

我注意到的另一件事是图像在完全加载之前开始显示。我如何使用我好的 .load() 函数验证图像以完全加载，然后显示？

更新：我怎么知道外部 .html 的其他内容在我拨打电话之前已经加载？..因为当触发应该开始加载其他图像的事件时（“li”上的 onclick 事件）图像是已经满载了..他们都加载了一次点击触发

4

1 回答 1

0

我猜您的第一个问题是您正在加载 url，因为"galeria.html#"+id这将是一个标准请求并取回整个页面（假设它是一个图像目录的页面）。您很可能正在寻找load()使用“url #fragment”参数格式的专用签名（注意空格），所以可能想要："galeria.html #"+id.

至于验证图像，您可以从各个元素挂钩加载事件，并在那里执行任何类型的延迟显示/验证。

于 2012-09-26T15:48:02.043 回答