修改

Question

我正试图用jQuery在两个图像之间淡入淡出。第一次当图像交叉褪色时，第一次出现眨眼时，我就这样做了。所以我尝试在淡入淡出之前预先加载图像。然而，仍然有一个眨眼。下面是一个代码的简化示例，即使使用预加载的图像仍然会闪烁（您应该能够复制并粘贴它并使其“正常工作”以查看问题）。我怎么做才能没有眨眼？谢谢！

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">                                         

$(document).ready(function(){
    function preload(arrayOfImages) {
        var temp = $('<img>')
        temp.attr("src", "http://www.colorcombos.com/images/colors/hex-codes/FF9900.png")
        $('#myGallery').prepend(temp)

        var temp = $('<img>')
        temp.attr("src", "http://www.colorcombos.com/images/colors/hex-codes/003366.png")
        temp.attr("class", "active")
        $('#myGallery').prepend(temp)

        $(arrayOfImages).each(function(){
        });
    }

    preload();

    $('#switch').click(function(){
        swapImages()
    });

    function swapImages(){
        var $active = $('#myGallery .active');
        var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
        $active.fadeOut("fast")
        $active.removeClass('active')
        $next.fadeIn("fast").addClass('active');
    }

});

</script>

<style>
    #myGallery{
      position:relative;
      width:100px;
      height:100px;
    }

    #myGallery img{
      display:none;
      position:absolute;
      top:0;
      left:0;
    }

    #myGallery img.active{
      display:block;
    }
</style>

</head>
<body>
  <div id="myGallery"></div>

<input type=button id=switch value=switch>
</body>
</html>

修改

我提出了添加

的建议

 var img1 = new Image();
 img1.src = "http://www.colorcombos.com/images/colors/hex-codes/003366.png";
 var img2 = new Image();
 img2.src = "http://www.colorcombos.com/images/colors/hex-codes/FF9900.png"

在顶部。然而，第一次淡入淡出时，它仍然从橙色变为白色变为蓝色，而不是橙色变为蓝色。下一次转换效果要好得多，蓝色到橙色，再次点击橙色到蓝色，没有短暂的白色时刻。

<html>
 <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">                                         


var img1 = new Image();
img1.src = "http://www.colorcombos.com/images/colors/hex-codes/003366.png";
var img2 = new Image();
img2.src = "http://www.colorcombos.com/images/colors/hex-codes/FF9900.png"


$(document).ready(function(){

    var temp = $(img1)
    $('#myGallery').prepend(temp)

    var temp = $(img2)
    temp.attr("class", "active")
    $('#myGallery').prepend(temp)

    $('#switch').click(function(){
        swapImages()
    });

    function swapImages(){
        var $active = $('#myGallery .active');
        var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
        $active.fadeOut("fast")
        $next.fadeIn("fast").addClass('active');
        $active.removeClass('active')
    }

});

</script>

<style>
    #myGallery{
      position:relative;
      width:100px;
      height:100px;
    }

    #myGallery img{
      display:none;
      position:absolute;
      top:0;
      left:0;
    }

    #myGallery img.active{
      display:block;
    }
</style>

</head>
<body>
<div id="myGallery">
</div>
  <input type=button id=switch value=switch>
</body>
</html>

Answer 1

第二张图片未正确预加载的原因是因为它设置为display：none。当浏览器看到它决定不值得立即加载图像时。正如其他人所建议的那样，只能通过javascript预加载图片。

var img = new Image();
img.src = "http://www.colorcombos.com/images/colors/hex-codes/003366.png";

您不需要实际引用img变量来使用预加载的图像，只要您使用相同的图像URL，浏览器就会将其从缓存中拉出来。

但是如果不改变你的方法，这就是我删除眨眼问题的方法。切换要添加到页面的图像的顺序，以便它们正确堆叠。然后从img选择器中删除display：none。

$(document).ready(function(){
function preload(arrayOfImages) {


    var temp = $('<img>')
    temp.attr("src", "http://www.colorcombos.com/images/colors/hex-codes/003366.png")
    temp.attr("class", "active")
    $('#myGallery').prepend(temp)

    var temp = $('<img>')
    temp.attr("src", "http://www.colorcombos.com/images/colors/hex-codes/FF9900.png");
    $('#myGallery').prepend(temp)

    $(arrayOfImages).each(function(){
    });
}

preload();

$('#switch').click(function(){
    swapImages()
});

function swapImages(){

    var $active = $('#myGallery .active');
    var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');

    $active.fadeOut("fast")
    $active.removeClass('active')
    $next.fadeIn("fast").addClass('active');
}

});

css

#myGallery img{
  position:absolute;
  top:0;
  left:0;
}

Answer 2

要预加载图像，只需将其放入初始化（您无需等待document.ready运行）：

var img1 = new Image();
img1.src = "http://www.colorcombos.com/images/colors/hex-codes/003366.png";
var img2 = new Image();
img2.src = "http://www.colorcombos.com/images/colors/hex-codes/FF9900.png"

这会将图像拉入浏览器缓存中，以便以后使用时快速加载。

Answer 3

看看jfriend00说的是什么。要回答您的后续问题，您不需要引用img1和img2对象。只需在具有相同src属性的页面中添加另一个将使浏览器意识到该图像是已下载的资源，并且它将自动使用其缓存中的预加载图像。

使用jQuery预加载图像，因此没有闪烁

修改

3 个答案: