确保仅在所有 PHP 完全执行后才执行 jQuery答案

【问题标题】：Ensuring that jQuery is executed only after all PHP has been fully executed确保仅在所有 PHP 完全执行后才执行 jQuery
【发布时间】：2012-12-14 07:46:51
【问题描述】：

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

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

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

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/

【问题讨论】：

你知道客户端-服务器模型吗？
您的 JavaScript 总是在页面被提供给浏览器之后执行。这意味着您的 JS 总是在 PHP 之后（除非您运行一些 AJAX 调用）。试试 $(function () { /* 你的代码在这里 */ });
这完全与仅在每个图像加载后才可用的图像尺寸有关。它与 PHP 和 javascript 的执行顺序无关。这个问题与手工编码的 HTML 相同（不涉及 PHP）。以下 Jack 的/elclanrs 的答案是成功的最佳机会。
感谢您的回复。为这个稍微新手的问题道歉 - 我对这两种语言都很陌生（你可能已经注意到了）。但是，通过实现 $(window).load 我发现什么都没有发生。

标签： javascript jquery onload image-loading

【解决方案1】：

你的问题有点混乱。据我了解，您在这里真正要问的是如何确保加载图像以准确计算其尺寸。

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

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

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

【讨论】：

【解决方案2】：

你试过了吗

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

【讨论】：

【解决方案3】：

如果您想确保所有图片都已加载，您可以使用.load() 事件：

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

【讨论】：

【解决方案4】：

通常，如果您需要检查图像是否完整加载（在 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);
    }
});

http://jsfiddle.net/oceog/EMPqW/5/ 然而，例如$(window).load() 和$(document).ready() 都没有使用这个处理程序。

【讨论】：

【解决方案5】：

在使用加载事件之前，这是您需要的，请确保您运行的是最新版本的 jquery。早期版本在不同的浏览器中实现得不是很好。

【讨论】：