Question

在this animation of a incineration plant中，当访问者滚动编号按钮时，隐藏了初始img，而另一个img取代了他的位置。所有要显示的图像都是预装的。

<script type="text/javascript">
var rep = HOTE + 'images/visites-dechets/uiom-kva-2/';

var imagesOver = new Array(
    'uiom-kva-1.gif',
    'uiom-kva-2.gif' 
/* others images...*/
);

window.onload = function() {
    preloadImages(rep, imagesOver);
    preloadFlag = true;
}

var prev_img = '';

function switchImg(sh, hi) {
    jQuery("#" + sh).show();
    jQuery("#" + hi).hide();
}
</script>
<div id="uiom" style="text-align: center;">
<img src="/images/visites-dechets/uiom-kva-2/uiom-kva.gif" id="img_usine" alt="" width="1000" height="600" usemap="#uiom-kva" style="height: auto; max-width: 100%;" /> 
<img src="/images/visites-dechets/uiom-kva-2/uiom-kva-1.gif" id="img_usine1" alt="" width="1000" height="600" usemap="#uiom-kva" style="height: auto; max-width: 100%; display: none;" />
<img src="/images/visites-dechets/uiom-kva-2/uiom-kva-2.gif" id="img_usine2" alt="" width="1000" height="600" usemap="#uiom-kva" style="height: auto; max-width: 100%; display: none;" /> 
<!-- others img... -->
<map id="uiom-kva" name="uiom-kva">
<area shape="circle" alt="" coords="101,484,22" href="#" id="btn-anim-1" onmouseover="switchImg('img_usine1', 'img_usine');return true" onmouseout="switchImg('img_usine', 'img_usine1');return true" />
<area shape="circle" alt="" coords="102,253,22" href="#" id="btn-anim-2" onmouseover="switchImg('img_usine2', 'img_usine');return true" onmouseout="switchImg('img_usine', 'img_usine2');return true" />
<!-- others areas... -->
</map>
</div>

当用户第一次翻转按钮时，更改图像时会显示闪烁（在所有浏览器中）。你知道怎么避免这个吗？？

谢谢

Answer 1

您可以使用jQuery fadeIn和fadeOut函数生成更平滑的结果（而不是显示和隐藏）。

切换2 GIF图像显示时如何避免闪烁？

1 个答案: