jquery fadeOut 表现不佳答案

【问题标题】：jquery fadeOut behavng badlyjquery fadeOut 表现不佳
【发布时间】：2013-02-02 08:23:28
【问题描述】：

虽然有很多线程处理 FadeIn/FadeOut，但我相信我在使用这些有些独特的函数时遇到了问题。我很难相信这可能是带宽问题，但如果它在 @ localhost 上运行得很好，而且在网上运行得不太好（10mbs 帐户 @ Comcast），那么我不太确定该怎么做。

好的。简而言之，数据库通过 PHP gd_library 提供了一堆缩略图。有一个带有 id="placeholder" 的 450px 占位符图像的 div

<p class="placeholderContainer"><img id="placeholder" 
src="product_getimage.php?path='.$path.'&amp;size='.$size.'" border="0" alt="" /></p>

大拇指以这种形式循环吐出

<a href="../images/products/'.$catNAME.'/'.$imgLOC.'/'.$imgName.'" 
title="'.$imgTitle.'"><img src="product_getimage.php?path='.$pathT.'&
amp;size='.$sizeT.'" border="1" id="'.$imgName.'" alt="" /></a>

所有非常简单的东西。你可以在@transparentcable.com 看到它。单击产品按钮，然后单击音频电缆。左侧边栏是链接列表。单击其中任何一个，产品将加载到上述配置中。

现在是用于在拇指上运行简单点击事件的 jquery（在源代码中就可以了）

$(document).ready(function() {
 $('#prod-thumbs a img').click(function() {
  var selImg = $(this).attr('id');
  var imagePath = "../images/products/<?php echo strtolower($catNAME);?>/<?php echo 
  $imgLOC; ?>/";
  var finalImg = imagePath + '/' + selImg;
  $('img#placeholder').fadeOut(500, function() {
   $('#placeholder').fadeIn(300).attr({src:finalImg});
   });
 return false;
 });
});

本质上，它只是多年前更改图像 src 的旧 javascript 图像交换的一种变体。这里也一样。

除了，在这种情况下，fadeOut 做了它的事情，但是占位符图像仍然存在，然后当fadeIn 函数运行时它很快被替换。就像我说的，在 WAMP 系统上的办公室里工作得很好，但在网上有一个讨厌的小绊脚石。

源代码中的一切都非常明显，欢迎提出任何建议。

【问题讨论】：

作为 url 提供，以便我们可以看到它的实际效果
有什么令人惊讶的？您正在加载 AFTER 主页完成后的“淡入淡出”图像，但不要等待图像加载。毫不奇怪，当您使用“真实”连接而不是本地连接进行测试时，它需要更长的时间。
抱歉给您带来了困惑。作为特定产品的数据库调用的一部分，在单击事件之前加载“淡出”图像。它是占位符图像，是该产品数据库记录的一部分。它默认加载，以防访问者没有点击任何缩略图。
oops ... 有人要求提供 URI transparentcable.com/products/… ... 试试这个链接，看看我的意思。我也玩了一点淡入和淡出速度，它肯定对过渡有影响

标签： php fadein fadeout attr

【解决方案1】：

我认为 Marc B 是正确的。你试过了吗：

$('#placeholder').attr({src:finalImg});
$('#placeholder').fadeIn(300);

【讨论】：