Javascript 确保jQuery仅在所有PHP完全执行后执行

我有一些jQuery代码可以与一些外部PHP一起工作，但通常只有在第二次刷新之后。代码设计为获取列表中每个图像的尺寸和，然后根据其最长边重新设置每个图像的样式，以适合其父图像。第一次加载此页面时，jQuery似乎无法确定所有图像的高度和宽度，因此样式被忽略确保从PHP调用的图像完全加载后执行jQuery的最佳方法是什么？

情景： 我有一个使用外部PHP脚本调用图像列表的页面。PHP运行后，结果将作为HTML在id为“txtHint”的div中进行回显

所以这个PHP（因为相关性而被截断）

应该提到的是，外部PHP脚本是从页面头部的JavaScript中调用的。我不确定这是否有区别

当前代码可以工作，但不是第一次。我尝试了$（window）.load等，并在前面提到的调用PHP脚本的JavaScript中调用它，但问题仍然存在

有关工作示例，请参见以下JSFIDLE： 你试过了吗

$(document).ready(function(){
//your code here
});

---

如果要确保已加载所有图像，可以使用

.load（）

事件：

$(window).load(function() {
    // document and images should have loaded by now.
});

---

你的问题有点让人困惑。据我所知，你在这里真正要问的是如何确保加载图像以准确计算其尺寸

PHP代码与此无关，因为PHP总是在JavaScript之前进行解释。服务器将输出HTML，JS将看到这一点，但不会看到原始PHP。这就是服务器-客户机模型的工作原理

要确保在操作图像之前加载图像，可以使用

窗口

对象的

加载

事件

$(window).load(function(){ //images were loaded });

---

通常，如果您需要检查图像是否已完全加载（在javascript中呈现图像src时通常需要，但在您的案例中看起来也需要），以及其他任何无助的情况，您可能需要在图像上放置处理程序

load（）

，然后再对其进行处理，下面是演示：

$("#txtHint img").each(function() {
    $t = $(this);

    function image_process() {
        var imgHeight = $t.height();
        var imgWidth = $t.width();

        if (imgHeight > imgWidth) {
            $t.css({
                'height': '100%',
                'width': 'auto'
            });
        }
        else {
            $t.css({
                'height': 'auto',
                'width': '100%',
                'position': 'relative',
                'top': '50%',
                'margin-top': -imgHeight / 2 + 'px',
                'display': 'inline-block'
            });
        }
    }
    if (this.complete) {
        image_process()
    } else {
        $t.one('load',image_process);
    }
});​

---

但是，在示例中，

$（window）.load（）

和

$（document）.ready（）

都不使用此处理程序。

在使用加载事件之前，请确保运行的是最新版本的jquery。早期的版本在不同的浏览器中没有很好地实现它。

您知道客户机-服务器模型吗？您的JavaScript总是在页面送达浏览器后执行。这意味着您的JS总是在PHP之后（除非您运行一些AJAX调用）。试试$（函数（）{/*您的代码在这里*/}）；这完全与图像尺寸有关，仅在加载每个图像后才可用。这与PHP和javascript的执行顺序无关。这个问题与手工编码的HTML（不涉及PHP）相同。下面是杰克/埃尔克兰斯的答案，这是成功的最好机会。谢谢你的回答。对于这个略显生疏的问题，我深表歉意——我对这两种语言都相当陌生（你可能已经注意到）。然而，通过实现$（window.load），我发现什么也没有发生。

$(window).load(function() {
    // document and images should have loaded by now.
});

$(window).load(function(){ //images were loaded });

$("#txtHint img").each(function() {
    $t = $(this);

    function image_process() {
        var imgHeight = $t.height();
        var imgWidth = $t.width();

        if (imgHeight > imgWidth) {
            $t.css({
                'height': '100%',
                'width': 'auto'
            });
        }
        else {
            $t.css({
                'height': 'auto',
                'width': '100%',
                'position': 'relative',
                'top': '50%',
                'margin-top': -imgHeight / 2 + 'px',
                'display': 'inline-block'
            });
        }
    }
    if (this.complete) {
        image_process()
    } else {
        $t.one('load',image_process);
    }
});​