Ale*_*xis 2 javascript jquery jquery-selectors
我试图用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>
您的第二张图片未正确预加载的原因是因为它设置为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;
}
| 归档时间： |
|
| 查看次数： |
3827 次 |
| 最近记录： |