php输出完成后通过jquery ajax加载内容

Question

我目前正在使用 jquery ajax 将数据发布到一个 php 文件，该文件使用该数据来构建和输出基于 jQuery 的画廊。

点击触发ajax的“链接”是：

<li class="portfolioLink" id="identity">identity</li>
<li class="portfolioLink" id="mobile">mobile</li>
<li class="portfolioLink" id="web">web</li>

jQuery ajax 的一个示例是：

$("#identity").click(function(){
    $.ajax({
        url: 'portfolio.php',
        type: "POST",
        data: ({data: 'portfolio/design/identityDesign/*'}),
        success: function(data){
        $("#content_middle").html(data);
        }
    });
    $("#identity").addClass('active');
    $(".portfolioLink:not(#identity)").removeClass('active')
});

（这个 jquery 基本上用不同的数据再迭代 2 次：）

这工作正常，只是在处理输出的 JavaScript 时将portfolio.php（画廊构建器）的输出加载到#content_middle（因此看起来画廊正在#content_middle 中实时构建）。看到它发生可能会更有意义：www.frende.me/design.php

我想要做的是加载完全构建的画廊。

Answer 1

如何隐藏元素，添加新的 html 并再次显示？像这样：

$("#identity").click(function(){     
    $.ajax({         
        url: 'portfolio.php',         
        type: "POST",         
        data: ({data: 'portfolio/design/identityDesign/*'}),         
        success: function(data){ 
            $("#content_middle").hide();       
            $("#content_middle").html(data);         
            $("#content_middle").show();
        }     
    });     
$("#identity").addClass('active');     
$(".portfolioLink:not(#identity)").removeClass('active') }); 

Answer 2

如果我理解正确，您希望页面加载后内容完全显示。不幸的是，一旦创建了 DOM，页面就会返回。所以图像会被认为是构建的，但这并不意味着它们的 src 已经被加载。

尝试使用像这样的图像预加载器one

希望这会有所帮助，否则如果您需要更多详细信息，请发表评论。