虽然有很多线程处理FadeIn/FadeOut,但我相信我在使用这些独特的函数时遇到了问题。我发现很难相信它可能是带宽,但如果它在localhost上完美工作,并且在线效果不太好(10mbs帐户@Comcast),那么我不太确定该怎么办。
好的。简而言之,DB通过PHP gd_library提供了一堆缩略图。有一个div,它有一个更大的450px占位符图像,带有id="placeholder"
<p class="placeholderContainer"><img id="placeholder"
src="product_getimage.php?path='.$path.'&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;
});
});
从本质上讲,这只是几年前旧的javascript图像交换的变体,其中图像的src被更改。这里也是一样。
除了,在这种情况下,fadeOut做了它的事情,但占位符图像仍然存在,然后当fadeIn函数运行时,它会很快被替换。就像我说的,在WAMP系统上,它在办公室里运行得很好,但在网上却有一个令人讨厌的小错误。
源代码中的所有内容都很明显,欢迎提出任何建议。
我认为Marc B的观点是正确的。你试过吗:
$('#placeholder').attr({src:finalImg});
$('#placeholder').fadeIn(300);