问题描述
TL; DR：有没有一种方法可以在不显示页面闪烁的情况下可靠地交换图像，同时显示正在加载的图像？
我有2个图像和2个按钮，当我将鼠标悬停在一个按钮上时，它会显示一个图像。将鼠标悬停在另一个按钮上可切换到第二个图像。我是这样做的：
$ b
$（'＃button1'）。mouseover（function ）{
$（'＃image'）。attr（'src'，'image1.png'）;
}）;
$ b $（'＃button2'）。mouseover（function（）{
$（'＃image'）。attr（'src'，'image2.png'）;
}）;
这可以正常工作，但是当第一张图片加载完毕，第二张图片没有加载时，显示第二张图像，直至完成加载。为了给用户一些指示，说明新图像何时加载（他们期望立即出现），我强制它在这些交换之前添加一个空图像，如下所示：
$（'＃button1'）。mouseover（function（）{
$（'＃image'）。attr 'src'，'＃'）;
$（'＃image'）。attr（'src'，'image1.png'）;
}）;
$ b $（'＃button2'）。mouseover（function（）{
$（'＃image'）。attr（'src'，'＃'）;
$ （'#image'）。attr（'src'，'image2.png'）;
}）;
当一张图片在加载时显示图片时， ，它们之间的空图像在切换图像时会导致闪烁。我想我可以解决这个问题，一旦两张图片都加载完毕，关闭null图片，但结果不可靠。 $（'＃image'）。prop（'complete'）和的建议在其他位置在计算器上是不一致的在注意图像是否已被加载或不。检测加载的图像似乎只是一个死胡同。
我也考虑过在创建图像前后强制显示和隐藏图像，但这似乎不是尽管我不知道为什么可以工作。新文件在加载时不显示，我不确定它们是否正确交换：
<$ c $（'＃image'）。$（$'$ image'）。attr（'src' ，'image1.png'）;
$（'＃image'）。show（）;
}）;
$ b $（'＃button2'）。mouseover（function（）{
$（'＃image'）。hide（）;
$（'＃image'）。 attr（'src'，'image2.png'）;
$（'＃image'）。show（）;
}）;
有没有一种方法可以可靠地交换图像，同时显示当时正在加载的图像，而不会导致页面闪烁，我还没有尝试过？
问题是这个HTML内容通过更改 src 位置使浏览器等待，直到图像加载显示图像。这似乎不可修改。
HTML：
< img id =imagesrc =>
以及具有此行为的javascript：
$（'＃button1'）。mouseover（function（）{
$（'＃image'）。attr（'src'，'image1.png'）;
}）;
$ b $（'＃button2'）。mouseover（function（）{
$（'＃image'）。attr（'src'，'image2.png'）;
}）;
更改HTML：
< div id ='image_container'> < / DIV>
和javascript to：
$（'＃button1'）。mouseover（function（）{
//移除旧图像并将其替换为新图像
$（'＃image_container'）。 empty（）
.append（< img id ='image'src ='image1.png'>）;
}）;
$ b $（'＃button2'）。mouseover（function（）{
$（'＃image_container'）。empty（）
.append（< img id = 'image'src ='image2.png'>）;
}）;
使浏览器在下载时显示图像。我不确定为什么，但似乎只是新的< img> s 的处理方式与< img> s 与 src 修改。
TL;DR: Is there a way to swap the images reliably while showing whichever image is being loaded at the time without causing page flicker?
I have 2 images and 2 buttons and when I hover over one button it shows the one image. Hovering over the other button swaps to the second image. I was doing it like this:
$('#button1').mouseover(function() {
$('#image').attr('src', 'image1.png');
});
$('#button2').mouseover(function() {
$('#image').attr('src', 'image2.png');
});
This works fine but when the first image has loaded and the second hasn't, it doesn't show the second image until it has completed loading. To try to give the user some indication of when the new image is loading (which they're expecting to appear immediately), I forced it to add a null image before these swaps, like this:
$('#button1').mouseover(function() {
$('#image').attr('src', '#');
$('#image').attr('src', 'image1.png');
});
$('#button2').mouseover(function() {
$('#image').attr('src', '#');
$('#image').attr('src', 'image2.png');
});
This works great when one image is loading by showing the image as it's loading but now once both are loaded, the null image in between them causes a flicker when switching images. I thought I could fix this by turning the null image off once both images are loaded but that has turned out to be unreliable. Both $('#image').prop('complete') and imagesloaded as suggested in other locations on stackoverflow are inconsistent at noticing whether the image has been loaded or not. Detecting loaded images just seems to be a dead end.
I also considered trying to force the images to show and hide before and after they were created but this doesn't seem to work at all though I'm not sure why. The new one doesn't show while loading and I'm not sure if they're swapping properly:
$('#button1').mouseover(function() {
$('#image').hide();
$('#image').attr('src', 'image1.png');
$('#image').show();
});
$('#button2').mouseover(function() {
$('#image').hide();
$('#image').attr('src', 'image2.png');
$('#image').show();
});
Is there a way to swap the images reliably while showing whichever image is being loaded at the time without causing page flicker that I haven't tried?
The problem is having this HTML content updated by changing the src location makes the browser wait until the image is loaded before displaying the image. This doesn't seem to be modifiable.
The HTML:
<img id="image" src="">
and javascript with this behavior:
$('#button1').mouseover(function() {
$('#image').attr('src', 'image1.png');
});
$('#button2').mouseover(function() {
$('#image').attr('src', 'image2.png');
});
Changing the HTML:
<div id='image_container'> </div>
and javascript to:
$('#button1').mouseover(function() {
// Remove the old image and replace it with the new one
$('#image_container').empty()
.append("<img id='image' src='image1.png'>");
});
$('#button2').mouseover(function() {
$('#image_container').empty()
.append("<img id='image' src='image2.png'>");
});
makes the browser show the image while it is downloaded. I'm not exactly sure why but it seems to just be that new <img>s are handled differently than <img>s with src modifications.
这篇关于在立即显示新图像的同时交换图像而不闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！