切换2 GIF图像显示时如何避免闪烁？ [英] How to avoid a blink when switching 2 GIF images display?

问题描述

在焚烧厂的这个动画，当访问者滚动一个带编号的按钮时，隐藏了初始的 img ，另一个 img 取代他的位置。
所有要显示的图片都是预先加载的。

In this animation of a incineration plant, when the visitor roll over a numbered button, the initial img is hidden and another img take his place. All images to be displayed are preloaded.

<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>

当用户第一次翻转按钮时，图像更改时会出现闪烁（在所有浏览器中）。你知道如何避免这种情况。 ？

When the user roll over a button for the first time, a blink is visible when the image is changed (in all browsers). Do you know how to avoid this. ?

谢谢

推荐答案

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

You can use the jQuery fadeIn and fadeOut functions to produce a smoother result (instead of show and hide).

这篇关于切换2 GIF图像显示时如何避免闪烁？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！