javascript - 确保仅在所有 PHP 完全执行后才执行 jQuery

Question

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

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

所以这个 PHP(因相关性而被 chop )...

echo "<li><img src='images/".$rowcat['imageurl']. "'><div class='title'>" . $counter . ". " . $rowcat['name'] ."</div></li>";                       
    $counter++;

回显到这个“txtHint”div:

<div class="featured-scroller">
<ul>
    <div id="txtHint">
            <li><img src="images/012.jpg"><div class="title">1. Eyemouth Museum </div></li>
            <li><img src="images/014.jpg"><div class="title">2. Edinburgh Museum</div></li>
            // and so on...
    </div>
</ul>
</div>

但是，返回结果后，我需要检查每个图像实例的尺寸，并根据宽度或高度是否更长来设置样式，同时还要保持其原始纵横比。

目前，我正在使用以下 jQuery:

$("#txtHint img").each(function() {
    var imgHeight = $(this).height();
    var imgWidth = $(this).width();

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

应该提到的是，外部 PHP 脚本是从页眉中的 JavaScript 中调用的。我不确定这是否有所作为。

当前代码有效，但不是第一次。我试过 $(window).load 等，并在上述调用 PHP 脚本的 JavaScript 中调用它，但问题仍然存在。

有关工作示例，请参阅以下 JSfiddle: http://jsfiddle.net/EMPqW/

Answer 1

您的问题有点令人困惑。据我了解，您在这里真正要问的是如何确保加载图像以准确计算它们的尺寸。

PHP 代码无关紧要，因为 PHP 总是在 JavaScript 之前被解释。服务器将输出 HTML 和 JS 将看到但不是原始的 PHP。这就是服务器-客户端模型的工作原理。

要确保在操作图像之前加载图像，您可以使用 window 对象的 load 事件。

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