Question

我上传了我的第一个网页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。但是它不起作用，因为我认为如果只点击一个元素，就不会把.load（）调用到只有我正在传递的id？当我点击一个时，它会调用所有的.html，而不仅仅是传递加载函数的元素id。因此，当单击其他li时，元素已经加载，因为加载调用仅触发一次li触发

我注意到的另一件事是图像在完全加载之前开始显示。我怎么能验证图像完全加载，然后使用我的好.load（）函数显示？

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

Answer 1

我认为这就是你想要的。我在this SO answer的基础上使用了它，效果很好！

Answer 2

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

就验证图像而言，您可以挂钩来自各个元素的加载事件，并在那里进行任何类型的延迟显示/验证。

jquery .load（）和图像显示

2 个答案: