Question

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

方案： 我有一个页面，使用外部PHP脚本调用图像列表。 PHP运行后，结果将作为HTML回显到id为＆＃34; txtHint＆＃34;的div中。

所以这个PHP（截断相关性）......

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

回应到这个＆＃34; txtHint＆＃34; 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。这就是服务器 - 客户端模型的工作原理。

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

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

Answer 2

你试过吗

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

Answer 3

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

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

Answer 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()都不使用此处理程序。

Answer 5

在使用load事件（这是您需要的）之前，请确保您运行的是最新版本的jquery。早期的版本并没有在不同的浏览器中很好地实现它。

确保只有在所有PHP完全执行后才执行jQuery

5 个答案: