使用 jQuery 预加载图像，这样就不会闪烁
我正在尝试使用 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>
I'm trying to fade between two images with jQuery. When I did this the first time there was a blink when the images cross faded the first time. So I tried to preload the images before the fade takes places. However the there is still a blink. Below is a simplified example of the code that still has the blink even with the preloaded images (you should be able to copy and paste it in and have it 'just work' to see the issue). How do I make it so that there is no blink? Thank you!
<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>
Edit
I did the suggestion of adding
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"
at the top. However, the first time the fade is done, it still goes from orange to white to blue, instead of orange to blue. The next time the transition is much better with blue to orange and if you click again orange to blue with no brief moment of white.
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您的第二张图像未正确预加载的原因是它被设置为显示：无。当浏览器发现它决定不值得立即加载图像时。正如其他人所建议的，仅通过 javascript 预加载图像。
您不需要实际引用 img 变量来使用预加载的图像，只要您使用相同的图像 url，浏览器就会从缓存中提取它。
但在不改变你的方法的情况下，这就是我消除眨眼问题的方法。
切换添加到页面的图像顺序，以便它们正确堆叠。然后从 img 选择器中删除 display:none 。
CSS
The reason your 2nd image is not getting preloaded correctly is because it was set to display:none. When the browser sees that it decides its not worth loading the image right away. As has been suggested by others, preload the image exclusively through javascript.
You don't need to ever actually reference the img variable to use the preloaded image, anytime you use the same image url the browser will just pull it from the cache.
But without changing your method, this is how I removed the blink issue.
Switch the order of the images being added to the page so that they stack up correctly. and then remove the display:none from the img selector.
the css
要预加载图像，只需将其放入初始化中（您不必等待 document.ready 来运行它）：
这会将图像拉入浏览器缓存，以便稍后使用它们时它们会快速加载。
To preload the images, just put this in your initialization (you don't have to wait for document.ready to run this):
This will pull the images into the browser cache so they will load quickly when you use them later.
看看jfriend00是怎么说的。要回答您的后续问题，您不需要引用 img1 和 img2 对象。只需将另一个具有相同 src 属性的页面添加到页面中，浏览器就会意识到该图像是它已经下载的资源，并且它会自动使用缓存中预加载的图像。
See what jfriend00 said. To answer your followup question, you don't need to reference the img1 and img2 objects. Simply adding another to the page with the same src attribute will make the browser realize that that image is a resource it has already downloaded, and it'll automatically use the preloaded image from its cache.