Javascript 使用jQuery预加载图像以避免闪烁_Javascript_Jquery_Jquery Selectors

Javascript 使用jQuery预加载图像以避免闪烁

javascript jquery

Javascript 使用jQuery预加载图像以避免闪烁,javascript,jquery,jquery-selectors,Javascript,Jquery,Jquery Selectors,我试图用jQuery在两个图像之间淡入淡出。当我第一次这样做时，当图像第一次交叉褪色时，有一个眨眼。所以我试着在淡入淡出之前预装图像。然而，仍然有一个眨眼。下面是一个简化的代码示例，即使有预加载的图像，代码仍然会闪烁（您应该能够复制并粘贴它，让它“正常工作”以查看问题）。我如何使它不闪烁？谢谢大家! <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/li

我试图用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>

在顶端。然而，第一次淡入淡出时，它仍然从橙色变为白色变为蓝色，而不是从橙色变为蓝色。下一次，蓝色到橙色的过渡会更好，如果你再次单击橙色到蓝色，没有短暂的白色瞬间

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


var img1=新图像（）；
img1.src=”http://www.colorcombos.com/images/colors/hex-codes/003366.png";
var img2=新图像（）；
img2.src=”http://www.colorcombos.com/images/colors/hex-codes/FF9900.png"
$（文档）.ready（函数（）{
变量温度=$（img1）
$（“#myGallery”）.prepend（临时）
变量温度=$（img2）
临时属性（“类”、“活动”）
$（“#myGallery”）.prepend（临时）
$（“#开关”）。单击（函数（）{
swapImages（）
});
函数swapImages（）{
var$active=$（'#myGallery.active'）；
var$next=（$（'#myGallery.active'）.next（）.length>0）？$（'#myGallery.active'）.next（）：$（'#myGallery img:first'）；
$active.fadeOut（“快速”）
$next.fadeIn（“fast”）.addClass（“active”）；
$active.removeClass（'active'）
}
});
#我的画廊{
位置：相对位置；
宽度：100px；
高度：100px；
}
#我的画廊{
显示：无；
位置：绝对位置；
排名：0；
左：0；
}
#myGallery img.active{
显示：块；
}

要预加载图像，只需将其放入初始化中即可（无需等待document.ready即可运行此操作）：

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

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

第二个图像未正确预加载的原因是，它被设置为显示：无。当浏览器看到它决定不值得立即加载图像时。正如其他人所建议的，只通过javascript预加载图像

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

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

但在不改变你的方法的情况下，我就是这样消除了眨眼问题的。切换要添加到页面的图像的顺序，以便它们正确堆叠。然后从img选择器中删除显示：无

$(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');
}

});

出于故障排除的目的，您可以打开包含浏览器缓存的文件夹并删除图像以从头开始。完全删除/禁用交换并加载页面。要查看预加载功能是否工作，请检查浏览器缓存以查看图像是否已加载。谢谢。然后如何从

ready

功能中访问

img1

和

img2

？不幸的是，这不是图像预加载。无论图像是否预加载，它都会第一次闪烁。这是我们缺少的其他东西。您不需要访问img1和img2。您只需像平常一样使用图像URL。此预加载将图像放入浏览器缓存，以便在正常使用时快速加载。我不知道你为什么要做预加载功能。这不是必需的。你所要做的就是添加我这里的代码。您不需要更改其他代码。这将自动受益。@Alexis K-我不认为你现在的问题是关于预加载图像，而是关于你的代码如何工作。我现在没有时间去解决另一个问题，也没有必要去摆弄

可见性

或

显示

属性。所有图像的

位置：绝对；排名：0；左：0

属性。因此，它们将叠加，并显示最后一幅图像。因此，仅删除

显示：无应该可以解决这个问题。是的，我要做的就是改变图片添加到页面的顺序。谢谢，我将编辑答案。非常有趣！有趣的是，如果浏览器知道图像不会显示，它实际上不会加载图像。它是否在下载图像之前解析css？非常感谢你弄明白了这一点@Alexik，当文档加载时，它会从上到下加载，DOM在图像完全加载之前就准备好了。同样感谢@kara的帮助！
var img = new Image();
img.src = "http://www.colorcombos.com/images/colors/hex-codes/003366.png";

$(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');
}

});

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