我正在尝试使用 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>
最佳答案
您的第二张图像未正确预加载的原因是它被设置为显示:无。当浏览器发现它决定不值得立即加载图像时。正如其他人所建议的，仅通过 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;
}
关于javascript - 使用 jQuery 预加载图像，这样就不会闪烁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7869342/