我有一些 jQuery 代码,可以与一些外部 PHP 一起工作,但通常只有在第二次刷新后才能工作。该代码旨在获取列表中每个图像的尺寸,然后重新设置每个图像的样式,以根据其最长边适合其父级。第一次加载此页面时,jQuery 似乎无法确定所有图像的高度和宽度,因此样式被忽略。 确保从 PHP 调用的图像完全加载后执行 jQuery 的最佳方法是什么?
场景: 我有一个页面,它使用外部 PHP 脚本调用图像列表。 PHP 运行后,结果将在 ID 为“txtHint”的 div 中以 HTML 形式回显。
所以这个 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/
最佳答案
你的问题有点困惑。据我了解,您在这里真正要问的是如何确保加载图像以准确计算其尺寸。
PHP 代码是无关紧要的,因为 PHP 总是在 JavaScript 之前被解释。服务器将输出 HTML,JS 会看到它,但看不到原始的 PHP。这就是服务器-客户端模型的工作原理。
要确保在操作图像之前加载图像,您可以使用 window
对象的 load
事件。
$(window).load(function(){ //images were loaded });
关于javascript - 确保 jQuery 仅在所有 PHP 完全执行后才执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13870151/