Question

我有一些用于动画天气雷达的javascript，但图像会在每个间隔闪烁。有谁知道如何解决这一问题？这是我到目前为止的代码.an .. http://jsfiddle.net/5a2BZ/46/

HTML

<script src="http://code.jquery.com/jquery-1.5.2rc1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>


<div id="slider">
    <div id="bar">
    </div>
</div>

的JavaScript

$('#bar').draggable({
    containment: 'parent'
});

var animate = null;
var even = true;

animate = setInterval(function () {

    if (even) {
        $("#bar").css("background-image", "url('http://static.baynews9.com/images/wx/bn9/radar/7_county/1342653720.jpg')");
        even = false;
    } else { 
        $("#bar").css("background-image", "url('http://static.baynews9.com/images/wx/bn9/radar/7_county/1342654440.jpg')");
        even = true;
    }

}, 500);



var el = document.getElementById('bar'); 
el.addEventListener("touchstart", touchHandler, true);
el.addEventListener("touchmove", touchHandler, true);
el.addEventListener("touchend", touchHandler, true);
el.addEventListener("touchcancel", touchHandler, true);

function touchHandler(event){
    var touches = event.changedTouches,
        first = touches[0],
        type = "";

    switch(event.type)
    {
        case "touchstart": type = "mousedown"; break;
        case "touchmove":  type="mousemove"; break;        
        case "touchend":   type="mouseup"; break;
        default: return;
    }
    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1,
                              first.screenX, first.screenY,
                              first.clientX, first.clientY, false,
                              false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

CSS

#slider {
    width: 700px;
    border: 1px solid #000;
    height: 500px;
}

#bar {
    border: 1px solid #000;
    left:30px;
    top:30px;
    height: 355px;
    cursor: pointer;
    width: 666px;
}

Answer 1

使用与雷达图像匹配的静态图像作为背景。这不是最好的解决方案，但似乎对我有用。这是CSS和HTML。我没有更改javascript。

#slider {
width: 700px;
border: 1px solid #000;
height: 500px;
}

#bar {
border: 1px solid #000;
left:30px;
top:30px;
height: 355px;
cursor: pointer;
width: 666px;
}
#well{
width: 100%;
height: 100%;
z-index:-1;
position:relative;
background-image: url('http://static.baynews9.com/images/wx/bn9/radar/7_county/1342653720.jpg');
}

将你的酒吧包裹在像以下的井中：

<div id="slider">
    <div id="bar">
        <div id="well">
        </div>
    </div>
</div>

以下是完整的解决方案：http://jsfiddle.net/5a2BZ/70/

Answer 2

Alex和Shaun都是正确的。

这是一个版本，允许它使用任意数量的图像（在合理范围内）。

http://jsfiddle.net/5a2BZ/66/

<script src="http://code.jquery.com/jquery-1.5.2rc1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.j></script>

<style>
.slider {
    width: 700px;
    border: 1px solid #000;
    height: 500px;
}

.bar {
    border: 1px solid #000;
    left:30px;
    top:30px;
    height: 355px;
    cursor: pointer;
        width: 666px;
    }

    .bar img {
        display: none;   
    }
</style>

<div class="slider">
    <div class="bar">
        <img src="http://static.baynews9.com/images/wx/bn9/radar/7_county/1342653720.jpg"/>
        <img src="http://static.baynews9.com/images/wx/bn9/radar/7_county/1342654440.jpg"/>
    </div>
</div>


<script>
$('.bar').draggable({
    containment: 'parent'
});

var animate = null,
    i = 0;

animate = setInterval(function () {
    var imgs = $('.bar').children('img'),
        currentImg = imgs.eq(i-1),
        nextImg = imgs.eq(i);

    if (i === 0) {
        currentImg = imgs.eq(imgs.length - 1);
    }            

    currentImg.hide();
    nextImg.show();

    if (i >= imgs.length - 1) {
        i = 0;
    }
    else {
        i += 1;
    }

}, 500);



var el = document.getElementById('bar'); 
el.addEventListener("touchstart", touchHandler, true);
el.addEventListener("touchmove", touchHandler, true);
el.addEventListener("touchend", touchHandler, true);
el.addEventListener("touchcancel", touchHandler, true);

function touchHandler(event){
    var touches = event.changedTouches,
        first = touches[0],
        type = "";

    switch(event.type)
    {
        case "touchstart": type = "mousedown"; break;
        case "touchmove":  type="mousemove"; break;        
        case "touchend":   type="mouseup"; break;
        default: return;
    }
    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1,
                              first.screenX, first.screenY,
                              first.clientX, first.clientY, false,
                              false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}
</script>

Answer 3

如果我是你，我宁愿用正确的图片制作几张DIV，并在需要时显示和隐藏这些div，这样你就不会有任何闪烁。

这样的一些简单代码：

    <div id="slider" class="Normal" style="position: relative; ">

<img alt="" src="http://static.baynews9.com/images/wx/bn9/radar/7_county/1342653720.jpg" style="" class="bar img1">
<img alt="" src="http://static.baynews9.com/images/wx/bn9/radar/7_county/1342654440.jpg" style="display:none;" class="bar img2">

    </div>

然后你可以在JavaScript中使用这样的东西：

if (even) {
        $(".bar").hide();
        $(".img1").show();
        even = false;
    } else { 
        $(".bar").hide();
        $(".img2").show();
        even = true;}

这是演示：http://jsfiddle.net/webwarrior/xnePc/4/

这将首先用一类横幅隐藏所有图像，然后显示类“img1”/“img2”的特定图像。 img1和img2也可以是id。

也可以查看这个库，了解更多想法：

http://sorgalla.com/projects/jcarousel/

http://sorgalla.com/projects/jcarousel/examples/static_simple.html

希望这有帮助。

Answer 4

闪烁的发生是因为每次刷新时图像都在变化（并再次加载）。在旧的背景从其源下载结束之前清除旧的背景。如果你真的不希望闪烁发生，你应该使用两个div，一个位于另一个的顶部，以及每次迭代的备用顺序。

Javascript图像动画闪烁图像bug

4 个答案: